在我的第一个“将所有内容放在一起” Chrome扩展程序中,我很困惑,我将用一些脚本摘录描述我正在尝试做的事情以及接下来的工作方式:
我有一个options.html页面和一个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 );
我的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);
myscript.js应该以某种方式获取本地存储数据,并确定如何处理图像元素。
我从html源获取图像没有任何问题,但似乎无法访问localStorage数据。我意识到这必须与环境不同的两个脚本有关,但是我不确定如何克服这个问题-据我所知,我需要从contentscript.js中注入myscript.js,因为contentscript.js不需要有权访问html源。
希望这里有人可以建议我所缺少的东西。
谢谢,谢谢您能提供的任何帮助!
-安迪
最佳答案
首先:您不需要注入脚本即可访问页面的DOM(<img>
元素)。 DOM已可用于内容脚本。
内容脚本不能直接访问扩展过程的localStorage
,您需要在后台页面和内容脚本之间实现一个通信通道以实现此目的。幸运的是,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