chrome.storage

বিবরণ

অনুমতিসমূহ

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

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

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

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

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

কোনও পরিষেবা কর্মীর ওয়েব স্টোরেজ API থেকে এক্সটেনশন স্টোরেজ API-তে ডেটা স্থানান্তর করতে:

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

এক্সটেনশনে ওয়েব স্টোরেজ API কীভাবে কাজ করে তার কিছু সূক্ষ্মতাও রয়েছে। [Storage and Cookies][storage-and-cookies] নিবন্ধে আরও জানুন।

স্টোরেজ এরিয়া

স্টোরেজ API নিম্নলিখিত চারটি বালতিতে বিভক্ত ("স্টোরেজ এরিয়া"):

storage.local

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

storage.sync

যদি সিঙ্কিং সক্ষম করা থাকে, তাহলে ব্যবহারকারী লগ ইন করা যেকোনো Chrome ব্রাউজারে ডেটা সিঙ্ক করা হবে। যদি অক্ষম করা থাকে, তাহলে এটি storage.local এর মতো আচরণ করবে। ব্রাউজার অফলাইনে থাকলে Chrome স্থানীয়ভাবে ডেটা সঞ্চয় করে এবং অনলাইনে ফিরে এলে সিঙ্কিং পুনরায় শুরু করে। কোটার সীমা প্রায় 100 KB, প্রতি আইটেম 8 KB। সিঙ্ক করা ব্রাউজারগুলিতে ব্যবহারকারীর সেটিংস সংরক্ষণ করতে এটি ব্যবহার করার কথা বিবেচনা করুন।

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

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

স্টোরেজ.ম্যানেজড

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

ম্যানিফেস্ট

স্টোরেজ API ব্যবহার করতে, এক্সটেনশন ম্যানিফেস্টে "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 স্টোরেজ এরিয়া সম্পর্কে আরও জানতে, স্টোরেজ এরিয়াগুলির জন্য ম্যানিফেস্ট দেখুন।

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

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

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

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

নিম্নলিখিত বিভাগগুলি স্টোরেজ API-এর সাধারণ ব্যবহারের উদাহরণ প্রদর্শন করে।

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

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

ব্যাকগ্রাউন্ড.জেএস:

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 ব্যবহার করে।

অপশন.এইচটিএমএল:

<!-- 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>

অপশন.জেএস:

// 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);

ব্যাকগ্রাউন্ড.জেএস:

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);
  }
});

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

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

ব্যাকগ্রাউন্ড.জেএস:

// 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);
});

এক্সটেনশন উদাহরণ

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

• গ্লোবাল সার্চ এক্সটেনশন ।
• জলের অ্যালার্ম এক্সটেনশন ।

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