chrome.storage

রিফ্রেশ তারিখ: ২০২৬-০৯-২৫ রোবটস: নোইনডেক্স

বর্ণনা

অনুমতি

সংক্ষিপ্ত বিবরণ

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

• এক্সটেনশন সার্ভিস ওয়ার্কার এবং কন্টেন্ট স্ক্রিপ্ট সহ সকল এক্সটেনশন কনটেক্সট স্টোরেজ এপিআই-তে অ্যাক্সেস পায়।
• JSON সিরিয়ালাইজেবল মানগুলো অবজেক্ট প্রপার্টি হিসেবে সংরক্ষিত থাকে।
• স্টোরেজ এপিআইটি বাল্ক রিড এবং রাইট অপারেশনের ক্ষেত্রে অ্যাসিঙ্ক্রোনাস।
• ব্যবহারকারী ক্যাশে ও ব্রাউজিং হিস্ট্রি মুছে ফেললেও ডেটা থেকে যায়।
• স্প্লিট ইনকগনিটো ব্যবহার করলেও সংরক্ষিত সেটিংস অপরিবর্তিত থাকে।
• এন্টারপ্রাইজ পলিসিগুলির জন্য একটি স্বতন্ত্র পঠন-যোগ্য পরিচালিত স্টোরেজ এলাকা অন্তর্ভুক্ত।

যদিও এক্সটেনশনগুলি কিছু ক্ষেত্রে (পপআপ এবং অন্যান্য HTML পৃষ্ঠা) [ Storage ][mdn-storage] ইন্টারফেসটি ( window.localStorage থেকে অ্যাক্সেসযোগ্য) ব্যবহার করতে পারে, নিম্নলিখিত কারণগুলির জন্য এটি সুপারিশ করা হয় না:

• এক্সটেনশনের সার্ভিস ওয়ার্কার Storage অ্যাক্সেস করতে পারছে না।
• কন্টেন্ট স্ক্রিপ্টগুলো হোস্ট পেজের সাথে স্টোরেজ শেয়ার করে।
• ব্যবহারকারী যখন তাঁর ব্রাউজিং হিস্ট্রি মুছে ফেলেন, তখন Storage ইন্টারফেস ব্যবহার করে সংরক্ষিত ডেটা হারিয়ে যায়।

একটি সার্ভিস ওয়ার্কার থেকে ওয়েব স্টোরেজ এপিআই থেকে এক্সটেনশন স্টোরেজ এপিআই-তে ডেটা স্থানান্তর করতে:

1. একটি রূপান্তর রুটিন এবং একটি [ onMessage ] হ্যান্ডলার সহ একটি অফস্ক্রিন ডকুমেন্ট তৈরি করুন।
2. অফস্ক্রিন ডকুমেন্টে একটি রূপান্তর রুটিন যোগ করুন।
3. এক্সটেনশন সার্ভিস ওয়ার্কারে আপনার ডেটার জন্য chrome.storage চেক করুন।
4. যদি আপনার ডেটা খুঁজে না পাওয়া যায়, তাহলে একটি অফস্ক্রিন ডকুমেন্ট তৈরি করুন এবং রূপান্তর প্রক্রিয়াটি শুরু করতে sendMessage() কল করুন।
5. অফস্ক্রিন ডকুমেন্টের onMessage হ্যান্ডলারের ভিতরে, রূপান্তর রুটিনটি কল করুন।

এক্সটেনশনগুলিতে ওয়েব স্টোরেজ এপিআই কীভাবে কাজ করে, তারও কিছু সূক্ষ্ম পার্থক্য রয়েছে। [স্টোরেজ এবং কুকিজ][storage-and-cookies] নিবন্ধে আরও জানুন।

স্টোরেজ এলাকা

স্টোরেজ এপিআই নিম্নলিখিত চারটি ভাগে ("স্টোরেজ এলাকা") বিভক্ত:

storage.local

ডেটা স্থানীয়ভাবে সংরক্ষিত থাকে, যা এক্সটেনশনটি সরিয়ে ফেললে মুছে যায়। কোটার সীমাবদ্ধতা প্রায় ১০ মেগাবাইট, তবে "unlimitedStorage" পারমিশনের জন্য অনুরোধ করে এটি বাড়ানো যেতে পারে। অধিক পরিমাণে ডেটা সংরক্ষণের জন্য এটি ব্যবহার করার কথা বিবেচনা করতে পারেন।

storage.sync

সিঙ্কিং চালু থাকলে, ব্যবহারকারী যে কোনো ক্রোম ব্রাউজারে লগ ইন করা থাকলে ডেটা সেখানে সিঙ্ক হয়ে যায়। এটি বন্ধ থাকলে, এটি storage.local মতো কাজ করে। ব্রাউজার অফলাইনে থাকলে ক্রোম ডেটা স্থানীয়ভাবে সংরক্ষণ করে এবং আবার অনলাইনে এলে সিঙ্কিং পুনরায় শুরু করে। এর কোটার সীমাবদ্ধতা প্রায় ১০০ কিলোবাইট, অর্থাৎ প্রতিটি আইটেমের জন্য ৮ কিলোবাইট। সিঙ্ক করা ব্রাউজারগুলোতে ব্যবহারকারীর সেটিংস অক্ষুণ্ণ রাখতে এটি ব্যবহার করার কথা বিবেচনা করতে পারেন।

স্টোরেজ.সেশন

একটি ব্রাউজার সেশনের সময়কাল পর্যন্ত ডেটা মেমরিতে ধরে রাখে। ডিফল্টরূপে, এটি কন্টেন্ট স্ক্রিপ্টের কাছে উন্মুক্ত থাকে না, কিন্তু chrome.storage.session.setAccessLevel() সেট করার মাধ্যমে এই আচরণ পরিবর্তন করা যেতে পারে। কোটার সীমাবদ্ধতা প্রায় ১০ মেগাবাইট। সার্ভিস ওয়ার্কার রান জুড়ে গ্লোবাল ভেরিয়েবল সংরক্ষণ করতে এটি ব্যবহার করার কথা বিবেচনা করা যেতে পারে।

স্টোরেজ পরিচালিত

প্রশাসকগণ একটি পরিচালিত পরিবেশে কোনো সহায়ক এক্সটেনশনের সেটিংস কনফিগার করার জন্য স্কিমা এবং এন্টারপ্রাইজ পলিসি ব্যবহার করতে পারেন। এই স্টোরেজ এলাকাটি শুধুমাত্র পঠনযোগ্য।

প্রকাশ

স্টোরেজ এপিআই ব্যবহার করতে, এক্সটেনশন ম্যানিফেস্টে "storage" পারমিশনটি ঘোষণা করুন। উদাহরণস্বরূপ:

{
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ],
  ...
}

ব্যবহার

নিম্নলিখিত নমুনাগুলি local , sync এবং session স্টোরেজ এলাকাগুলি প্রদর্শন করে:

স্টোরেজ.লোকাল

chrome.storage.local.set({ key: value }).then(() => {
  console.log("Value is set");
});

chrome.storage.local.get(["key"]).then((result) => {
  console.log("Value currently is " + result.key);
});

স্টোরেজ.সিঙ্ক

chrome.storage.sync.set({ key: value }).then(() => {
  console.log("Value is set");
});

chrome.storage.sync.get(["key"]).then((result) => {
  console.log("Value currently is " + result.key);
});

স্টোরেজ.সেশন

chrome.storage.session.set({ key: value }).then(() => {
  console.log("Value was set");
});

chrome.storage.session.get(["key"]).then((result) => {
  console.log("Value currently is " + result.key);
});

managed স্টোরেজ এলাকা সম্পর্কে আরও জানতে, স্টোরেজ এলাকার ম্যানিফেস্ট দেখুন।

স্টোরেজ এবং থ্রটলিং সীমা

স্টোরেজ এপিআই-তে কিছু যোগ করাকে বড় ট্রাকে জিনিসপত্র তোলার মতো ভাববেন না। বরং ভাবুন, স্টোরেজে কিছু যোগ করা হলো একটি পাইপের মধ্যে কিছু রাখার মতো। পাইপটিতে হয়তো আগে থেকেই উপাদান থাকতে পারে, এমনকি সেটি ভর্তিও থাকতে পারে। আপনি যখন স্টোরেজে কিছু যোগ করেন এবং যখন তা প্রকৃতপক্ষে রেকর্ড করা হয়, তার মধ্যে সবসময় একটি বিলম্ব ধরে নেবেন।

স্টোরেজ এলাকার সীমাবদ্ধতা এবং তা অতিক্রম করলে কী হয়, সে সম্পর্কে বিস্তারিত জানতে sync , local এবং session কোটা তথ্য দেখুন।

ব্যবহারের ক্ষেত্র

নিম্নলিখিত বিভাগগুলিতে স্টোরেজ এপিআই-এর সাধারণ ব্যবহারগুলি তুলে ধরা হয়েছে।

স্টোরেজ আপডেটের প্রতি সিঙ্ক্রোনাস প্রতিক্রিয়া

স্টোরেজে করা পরিবর্তনগুলো ট্র্যাক করতে, আপনি এর onChanged ইভেন্টে একটি লিসেনার যোগ করতে পারেন। যখন স্টোরেজে কোনো পরিবর্তন হয়, তখন সেই ইভেন্টটি ফায়ার হয়। নমুনা কোডটি এই পরিবর্তনগুলো লিসেন করে:

background.js:

chrome.storage.onChanged.addListener((changes, namespace) => {
  for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
    console.log(
      `Storage key "${key}" in namespace "${namespace}" changed.`,
      `Old value was "${oldValue}", new value is "${newValue}".`
    );
  }
});

আমরা এই ধারণাটিকে আরও এগিয়ে নিয়ে যেতে পারি। এই উদাহরণে, আমাদের একটি অপশন পেজ আছে যা ব্যবহারকারীকে একটি "ডিবাগ মোড" টগল করার সুযোগ দেয় (এর বাস্তবায়ন এখানে দেখানো হয়নি)। অপশন পেজটি সাথে সাথেই নতুন সেটিংসগুলো storage.sync এ সেভ করে, এবং সার্ভিস ওয়ার্কারটি যত দ্রুত সম্ভব সেটিংটি প্রয়োগ করার জন্য storage.onChanged ব্যবহার করে।

options.html:

<!-- type="module" allows you to use top level await -->
<script defer src="options.js" type="module"></script>
<form id="optionsForm">
  <label for="debug">
    <input type="checkbox" name="debug" id="debug">
    Enable debug mode
  </label>
</form>

options.js:

// In-page cache of the user's options
const options = {};
const optionsForm = document.getElementById("optionsForm");

// Immediately persist options changes
optionsForm.debug.addEventListener("change", (event) => {
  options.debug = event.target.checked;
  chrome.storage.sync.set({ options });
});

// Initialize the form with the user's option settings
const data = await chrome.storage.sync.get("options");
Object.assign(options, data.options);
optionsForm.debug.checked = Boolean(options.debug);

background.js:

function setDebugMode() { /* ... */ }

// Watch for changes to the user's options & apply them
chrome.storage.onChanged.addListener((changes, area) => {
  if (area === 'sync' && changes.options?.newValue) {
    const debugMode = Boolean(changes.options.newValue.debug);
    console.log('enable debug mode?', debugMode);
    setDebugMode(debugMode);
  }
});

স্টোরেজ থেকে অ্যাসিঙ্ক্রোনাস প্রিলোড

যেহেতু সার্ভিস ওয়ার্কারগুলো সবসময় চালু থাকে না, তাই Manifest V3 এক্সটেনশনগুলোকে কখনও কখনও তাদের ইভেন্ট হ্যান্ডলারগুলো কার্যকর করার আগে স্টোরেজ থেকে অ্যাসিঙ্ক্রোনাসভাবে ডেটা লোড করতে হয়। এটি করার জন্য, নিম্নলিখিত কোড স্নিপেটটিতে একটি async action.onClicked ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে, যা তার লজিক কার্যকর করার আগে storageCache গ্লোবালটি ডেটা দ্বারা পূর্ণ হওয়ার জন্য অপেক্ষা করে।

background.js:

// Where we will expose all the data we retrieve from storage.sync.
const storageCache = { count: 0 };
// Asynchronously retrieve data from storage.sync, then cache it.
const initStorageCache = chrome.storage.sync.get().then((items) => {
  // Copy the data retrieved from storage into storageCache.
  Object.assign(storageCache, items);
});

chrome.action.onClicked.addListener(async (tab) => {
  try {
    await initStorageCache;
  } catch (e) {
    // Handle error that occurred during storage initialization.
  }

  // Normal action handler logic.
  storageCache.count++;
  storageCache.lastTabId = tab.id;
  chrome.storage.sync.set(storageCache);
});

সম্প্রসারণের উদাহরণ

স্টোরেজ এপিআই-এর অন্যান্য ডেমো দেখতে, নিচের যেকোনো উদাহরণ অন্বেষণ করুন:

• বৈশ্বিক অনুসন্ধান এক্সটেনশন ।
• জল অ্যালার্ম সম্প্রসারণ ।

chrome.storage.onChanged.addListener(
  callback: function,
)