關於注入腳本 + 本地存儲的 Chrome 擴展

Question

我對我的第一個“將所有內容放在一起”的 Chrome 擴展程序感到困惑，我將描述我正在嘗試做的事情，然后我是如何通過一些腳本摘錄來解決這個問題的：

1. 我有一個 options.html 頁面和一個 options.js 腳本，它允許用戶在文本字段中設置一個 url——這使用 localStorage 存儲。

 function load_options() { var repl_adurl = localStorage["repl_adurl"]; default_img.src = repl_adurl; tf_default_ad.value = repl_adurl; } function save_options() { var tf_ad = document.getElementById("tf_default_ad"); localStorage["repl_adurl"] = tf_ad.value; } document.addEventListener('DOMContentLoaded', function () { document.querySelector('button').addEventListener('click', save_options); }); document.addEventListener('DOMContentLoaded', load_options );

1. 我的 contentscript 將腳本“myscript”注入頁面（因此它可以訪問頁面 html 中的 img 元素）

 var s = document.createElement('script'); s.src = chrome.extension.getURL("myscript.js"); console.log( s.src ); (document.head||document.documentElement).appendChild(s); s.parentNode.removeChild(s);

1. myscript.js應該以某種方式獲取本地存儲數據並決定如何操作圖像元素。

我從 html 源中抓取圖像沒有任何問題，但我似乎無法訪問 localStorage 數據。 我意識到它必須與具有不同環境的兩個腳本有關，但我不確定如何克服這個問題——據我所知，我需要從 contentscript.js 注入 myscript.js，因為 contentscript.js 沒有可以訪問 html 源代碼。

希望這里有人可以建議我缺少的東西。

謝謝，我很感激你能提供的任何幫助！

-安迪

Answer 1

首先：您不需要注入腳本來訪問頁面的 DOM（ <img>元素）。 DOM 已可用於內容腳本。

內容腳本不能直接訪問擴展進程的localStorage ，你需要在后台頁面和內容腳本之間實現一個通信通道來實現這一點。 幸運的是，Chrome 為此提供了一個簡單的消息傳遞 API 。

我建議使用chrome.storage API 而不是localStorage 。 chrome.storage的優點是它可用於內容腳本，這允許您在沒有背景頁面的情況下讀取/設置值。 目前，您的代碼看起來非常易於管理，因此從同步localStorage切換到異步chrome.storage API 是可行的。

無論您如何選擇，內容腳本的代碼都必須異步讀取/寫入首選項：

// Example of preference name, used in the following two content script examples
var key = 'adurl';

// Example using message passing:
chrome.extension.sendMessage({type:'getPref',key:key}, function(result) {
    // Do something with result
});
// Example using chrome.storage:
chrome.storage.local.get(key, function(items) {
    var result = items[key];
    // Do something with result
});

如您所見，兩者之間幾乎沒有任何區別。 但是，要使第一個工作，您還必須向后台頁面添加更多邏輯：

// Background page
chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.type === 'getPref') {
        var result = localStorage.getItem(message.key);
        sendResponse(result);
    }
});

另一方面，如果您想切換到chrome.storage ，則必須稍微重寫選項頁面中的邏輯，因為當前代碼（使用localStorage ）是同步的，而chrome.storage是異步的：

// Options page
function load_options() {
   chrome.storage.local.get('repl_adurl', function(items) {
       var repl_adurl = items.repl_adurl;
       default_img.src = repl_adurl;
       tf_default_ad.value = repl_adurl;
   });
}
function save_options() {
   var tf_ad = document.getElementById('tf_default_ad');
   chrome.storage.local.set({
       repl_adurl: tf_ad.value
   });
}

文檔

• chrome.storage （方法獲取，方法設置）
• 消息傳遞（注意：此頁面使用chrome.runtime而不是chrome.extension 。為了與 Chrome 25- 向后兼容，請使用chrome.extension （ 例如同時使用兩者））
• 同步與異步 ft. Chrome 擴展的簡單實用解釋