更新：
我已经更新了使两个脚本同时运行的所有代码。
好的，首先您应该将选项数据保存在本地存储中，以便您可以访问所有页面的数据。这使您的工作变得轻松。
为了处理数据，我创建了一个名为global.js.
此文件必须包含在开头options.html和content.js手动或manifest.json.
global.js
var localStoragePrefix = "myextension_";
var LS_options = localStoragePrefix + "options";
var Options = {
Scripts : [
{
name : "script 1",
path : "script1.js",
enable : false
},
{
name : "script 2",
path : "script2.js",
enable : false
}
]
};
function DB_setValue(name, value, callback) {
var obj = {};
obj[name] = value;
console.log("ayarlar kaydedildi");
console.log(obj);
chrome.storage.local.set(obj, function() {
if(callback) callback();
});
}
function DB_load(callback) {
chrome.storage.local.get(LS_options, function(r) {
if ($.isEmptyObject(r[LS_options])) {
DB_setValue(LS_options, Options, callback);
} else {
Options = r[LS_options];
callback();
}
});
}
function DB_save(callback) {
DB_setValue(LS_options, Options, function() {
if(callback) callback();
});
}
function DB_clear(callback) {
chrome.storage.local.remove(LS_options, function() {
if(callback) callback();
});
}
这里是更新的 options.html，你会看到一些包含的 js 文件。
- jquery.min.js （你不需要使用这个，我只是想让它更有用）
- global.js
- 选项.js
选项.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="globals.js"></script>
<script type="text/javascript" src="options.js"></script>
</head>
<body class="uber-frame" i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize" style="font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 125%">
<div id="main-content" align="center">
<div id="mainview">
<section id="scripts">
<h3>Scripts</h3>
<div id="scriptTemplate" style="display:none">
<label>
<input type="checkbox" data-script = "script.js" />
<span>Enable Script</span>
</label>
</div>
</section>
</div>
</div>
</body>
</html>
事件处理程序附件在options.js文件中。
选项.js
$(function(){ DB_load(startOptionsPage); });
function startOptionsPage() {
$.each(Options.Scripts, function(index, script) {
var $scriptTemplate = $("#scriptTemplate").clone().show();
$scriptTemplate.find("label span").html("Enable " + script.name);
$scriptTemplate.find("label input[type='checkbox']")
.data("script", script.path)
.click(function() {
if ($(this).is(":checked")) {
script.enable = true;
} else {
script.enable = false;
}
DB_save(function() {
console.log("DB saved");
});
})
.prop('checked', script.enable);
$("#scripts").append($scriptTemplate);
});
}
在content.js文件中，我们得到选项，如果有一个选定的脚本，则包括脚本。
内容.js
DB_load(function() {
$.each(Options.Scripts, function(index, script) {
if (script.enable) {
$.getScript(chrome.extension.getURL(script.path), function() {
console.log(script.name + " was loaded!");
});
}
});
});
script1.js
alert("Hello from script1");
script2.js
alert("Hello from script2");
对于所有这些，您应该更新manifest.json文件。
- 包括
global.js进入content_script
- 许可
localstorage
- 包括 script1.js 和 script2.js 的 web_accessible_resources（为什么？）
最后这里是更新的manifest.json
清单.json
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"options_page": "options.html",
"description": "The first extension that I made.",
"content_scripts": [
{
"matches": ["http://stackoverflow.com/*"],
"all_frames": true,
"js": ["jquery.min.js","globals.js","content.js"],
"run_at": "document_end"
}
],
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs", "http://stackoverflow.com/*", "storage"
],
"web_accessible_resources": [
"script1.js",
"script2.js"
]
}
你的脚本文件夹应该是这样的，
如何添加更多脚本？
你必须做的只有两个改变，
您将像其他 script1.js 和 script2.js 一样将脚本添加到主文件夹，并且还将其添加 web_accessible_resources到manifest.json.
您还将更新“global.js”，只需将新脚本对象添加到 Options.Scripts 数组。像这样。
var Options = {
Scripts : [
{
name : "script 1",
path : "script1.js",
enable : false
},
{
name : "script 2",
path : "script2.js",
enable : false
},
{
name : "script 3",
path : "script3.js",
enable : false
}
]
};
就这样。但是不要忘记在加载新的更新之前从 chrome 中删除扩展，因为旧选项将保留在那里，如果不这样做，它将无法按预期工作。