chrome.storage

বর্ণনা

অনুমতি

ওভারভিউ

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

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

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

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

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

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

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

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

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

storage.local

ডেটা স্থানীয়ভাবে সংরক্ষণ করা হয়, যা এক্সটেনশন সরানো হলে সাফ হয়। কোটার সীমাবদ্ধতা প্রায় 10 MB, কিন্তু "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 স্টোরেজ এলাকাগুলি প্রদর্শন করে:

store.local

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

store.sync

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 ইভেন্টে একজন শ্রোতা যোগ করতে পারেন৷ সঞ্চয়স্থানে কিছু পরিবর্তন হলে, সেই ইভেন্টটি আগুন হয়ে যায়। নমুনা কোড এই পরিবর্তনগুলির জন্য শোনে:

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

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

যেহেতু পরিষেবা কর্মীরা সর্বদা চলমান থাকে না, মেনিফেস্ট 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);
});

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

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

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

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