javascript - 关于注入(inject)脚本 + 本地存储的 Chrome 扩展

Question

我正在摸索我的第一个“将它们放在一起”的 Chrome 扩展程序，我将描述我正在尝试做的事情以及我是如何通过一些脚本摘录来实现它的:

1. 我有一个 options.html 页面和一个允许用户在文本字段中设置 url 的 options.js 脚本——这是使用 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”注入(inject)页面(因此它可以访问页面 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 注入(inject) myscript.js，因为 contentscript.js 没有可以访问 html 源。

希望这里有人可以提出我遗漏的建议。

谢谢，非常感谢您提供的任何帮助!

-安迪

Answer 1

首先:您不需要注入(inject)脚本来访问页面的 DOM(<img> 元素)。 DOM 已可用于内容脚本。

内容脚本无法直接访问 localStorage在扩展程序的过程中，您需要在后台页面和内容脚本之间实现一个通信 channel 才能实现这一点。幸运的是，Chrome 提供了一个简单的 message passing 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 (方法get，方法set)
• > Message passing (注意:此页面使用 chrome.runtime 而不是 chrome.extension 。为了向后兼容 Chrome 25-，请使用 chrome.extension ( example using both ))
• > A simple and practical explanation of synchronous vs asynchronous ft. Chrome extensions