বুকমার্কলেট সিএসএস-ট্রিকসের জন্য একটি সম্পূর্ণ নির্দেশিকা

javascript: (() => {
  var style = document.createElement("style");
  style.innerHTML = "body{background:#000;color:rebeccapurple}";
  document.head.appendChild(style);
})();

আরো মার্জিত পদ্ধতি ব্যবহার করা হয় CSSStyleSheet ইন্টারফেস এই পদ্ধতিটি ক্রমবর্ধমান আপডেটের অনুমতি দেয় এবং নির্বাচকদের পড়তে, বিদ্যমান বৈশিষ্ট্যগুলিকে সংশোধন করতে, নিয়মগুলি মুছতে বা পুনরায় সাজাতে এবং গণনা করা কাঠামো পরিদর্শন করতে আপনাকে সরাসরি CSS অবজেক্ট মডেল (CSSOM) অ্যাক্সেস করতে দেয়। ব্রাউজারটি এইভাবে মান ইনপুটগুলিকেও যাচাই করে, যা আপনাকে ভাঙা CSS ইনপুট করা থেকে আটকাতে সাহায্য করে। এটি আরও জটিল কিন্তু আপনাকে আরও নিয়ন্ত্রণ দেয়।

javascript: (() => {
  const sheet = new CSSStyleSheet();
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
  sheet.insertRule("body { border: 5px solid rebeccapurple !important; }", 0);
  sheet.insertRule("img { filter: contrast(10); }", 1);
})();

যেহেতু আমরা আমাদের বুকমার্কলেট ব্যবহার করতে চাই এমন যেকোনো পৃষ্ঠায় সাধারণ ব্যবহারের জন্য আমরা CSS লিখছি, তাই এটা সচেতন হওয়া গুরুত্বপূর্ণ যে আমরা পৃষ্ঠার বিদ্যমান স্টাইলশীটের সাথে একচেটিয়াতা বা বিরোধের সমস্যায় পড়তে পারি। ব্যবহার করে !important এটি সাধারণত একটি খারাপ কোড গন্ধ হিসাবে বিবেচিত হয়, তবে অজানা বিদ্যমান শৈলীগুলিকে অগ্রাহ্য করার প্রেক্ষাপটে, এটি আমাদের প্রয়োজন মেটানোর একটি যুক্তিসঙ্গত উপায়।

সীমানা

দুর্ভাগ্যবশত, কিছু বাধা আছে যা আমাদের বুকমার্কলেট ব্যবহারে বাধা দিতে পারে। বিষয়বস্তু নিরাপত্তা নীতি (CSP) সবচেয়ে ব্যাপক. CSP হল একটি নিরাপত্তা বৈশিষ্ট্য যা ওয়েবসাইটগুলিকে কী লোড করা যেতে পারে তা নিয়ন্ত্রণ করার অনুমতি দিয়ে ক্রস-সাইট স্ক্রিপ্টিং আক্রমণের মতো দূষিত ক্রিয়া প্রতিরোধ করার চেষ্টা করে। উদাহরণস্বরূপ, আপনি আপনার ব্যাঙ্কের ওয়েবসাইটে স্ক্রিপ্টগুলি চালানোর অনুমতি দিতে চান না। একটি বুকমার্কলেট যা ক্রস-অরিজিন অনুরোধের উপর নির্ভর করে (বর্তমান ওয়েবসাইটের বাইরের অনুরোধগুলি) প্রায়শই ব্লক করা হয়। এই কারণে, একটি বুকমার্কলেট আদর্শভাবে বাহ্যিক কিছুর উপর নির্ভর না করে স্বয়ংসম্পূর্ণ হওয়া উচিত। আপনি যদি সন্দেহ করেন যে একটি বুকমার্কলেট একটি ওয়েবসাইটের নিরাপত্তা নীতি দ্বারা অবরুদ্ধ করা হয়েছে, আপনি কোনো ত্রুটির জন্য আপনার ব্রাউজারের বিকাশকারী সরঞ্জামগুলিতে কনসোলটি পরীক্ষা করতে পারেন৷

যেহেতু বুকমার্কলেটগুলি কেবলমাত্র URL, তাই তাদের নির্দিষ্ট করা যেতে পারে এমন দৈর্ঘ্যের কোনও কঠোর সীমা নেই৷ ব্যবহারে, ব্রাউজারগুলি সীমাবদ্ধতা আরোপ করে, যদিও সেগুলি বেশিরভাগ ক্ষেত্রে আপনি যা সম্মুখীন হবেন তার চেয়ে বেশি। আমার নিজের পরীক্ষায় (যা সংস্করণ এবং প্ল্যাটফর্ম অনুসারে পরিবর্তিত হতে পারে), এখানে আমি উপরের সীমাগুলি খুঁজে পেয়েছি: ফায়ারফক্স এবং সাফারি উভয় ক্ষেত্রেই আমি তৈরি করতে পারি এমন বৃহত্তম বুকমার্কলেট ছিল 65536 বাইট। ফায়ারফক্স আমাকে কোনো বৃহত্তর দৈর্ঘ্যের একটি বুকমার্কলেট তৈরি করার অনুমতি দেবে না, এবং Safari আমাকে একটি বুকমার্কলেট তৈরি করার অনুমতি দেবে, কিন্তু ট্রিগার হলে এটি কিছুই করবে না। আমি ক্রোমে তৈরি করা সবচেয়ে বড় বুকমার্কলেটটি ছিল 9999999 অক্ষর দীর্ঘ, এবং সেই পয়েন্টের পরে টেক্সটবক্সের সাথে ইন্টারঅ্যাক্ট করতে আমার সমস্যা হতে শুরু করে। আপনার যদি আরও কিছু সময়ের প্রয়োজন হয়, আপনি উপরের CSP সীমাবদ্ধতাগুলি মাথায় রেখে বাইরের অবস্থান থেকে স্ক্রিপ্টটি লোড করার কথা বিবেচনা করতে পারেন:

javascript:(() => {
  var script=document.createElement('script');
  script.src="https://example.com/bookmarklet-script.js";
  document.body.appendChild(script);
})();

অন্যথায়, আপনি TamperMonkey এর মতো একটি ব্যবহারকারীর স্ক্রিপ্ট টুল বিবেচনা করতে পারেন, অথবা, আরও উন্নত কিছুর জন্য, আপনার নিজের ব্রাউজার এক্সটেনশন তৈরি করার কথা বিবেচনা করতে পারেন। আরেকটি বিকল্প হল আপনার ব্রাউজার ডেভেলপার টুলে একটি স্নিপেট তৈরি করা। বুকমার্কলেট সংক্ষিপ্ত স্নিপেটের জন্য সেরা।

দুর্দান্ত বুকমার্কলেট

এখন যেহেতু আপনি জানেন যে বুকমার্কলেটগুলি কী এবং একটি পরিমাণে তারা কী করতে সক্ষম, আমরা তাদের কিছু দরকারী জিনিসগুলি দেখে নিতে পারি৷ যাইহোক, এটি করার আগে, আমি জোর দিতে চাই যে আপনি অনলাইনে যে বুকমার্কলেটগুলি খুঁজে পান সেগুলি চালানোর সময় আপনার সতর্ক হওয়া উচিত। আপনি অনলাইনে যে বুকমার্কলেটগুলি খুঁজে পান তা অন্য কারো দ্বারা লেখা কোড৷ বরাবরের মতো, আপনাকে অবশ্যই সতর্ক, সতর্ক এবং বিচক্ষণ হতে হবে। লোকেরা দূষিত বুকমার্কলেট লিখতে পারে এবং লিখতে পারে যা অ্যাকাউন্টের শংসাপত্র চুরি করে বা আরও খারাপ।

এজন্য শুরুতে কোডটি পেস্ট করলে javascript: ঠিকানা বারে, ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে এটি সরিয়ে দেয়। javascript: লোকেদেরকে অসাবধানতাবশত বুকমার্কলেট ট্রিগার করা থেকে আটকাতে উপসর্গ। আপনাকে অবশ্যই উপসর্গটি পুনরায় চালু করতে হবে। কাছাকাছি যেতে javascript: স্ট্রিপিং, বুকমার্কলেটগুলি প্রায়শই একটি পৃষ্ঠার লিঙ্ক হিসাবে বিতরণ করা হয় যা আপনি আপনার বুকমার্কগুলিতে টেনে আনবেন বলে আশা করা হচ্ছে৷

CSS-ট্রিকস-এ আগে নির্দিষ্ট বুকমার্কলেটের কথা বলা হয়েছে। ব্রাউজার এবং ওয়েব প্ল্যাটফর্মের বিবর্তনের পরিপ্রেক্ষিতে, অনেকগুলি এখন অপ্রচলিত, তবে আরও কিছু সমসাময়িক নিবন্ধের মধ্যে রয়েছে:

সেই পোস্টগুলিতে মন্তব্যগুলি পরীক্ষা করতে ভুলবেন না, কারণ সেগুলি সম্প্রদায়ের অগণিত দুর্দান্ত বুকমার্কলেটে পূর্ণ। সম্প্রদায়ের বুকমার্কলেটগুলির কথা বলছি:

যদি আপনার কাছে মূল্যবান মনে হয় এমন কোনো সোনার বুকমার্কলেট থাকে, তাহলে মন্তব্যে সেগুলি শেয়ার করতে ভুলবেন না।