アップデート：
両方のスクリプトを同時に実行するために、すべてのコードを更新しました。
OK、最初はオプションデータをlocalstorageに保存して、すべてのページのデータにアクセスできるようにする必要があります。それはあなたの仕事を簡単にします。
データを操作するために、という名前のjavascriptファイルを作成しました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
- options.js
options.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ファイルにあります。
options.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ファイルにはオプションがあり、選択されている場合はスクリプトが含まれています。
content.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"
]
}
スクリプトフォルダは次のようになります。
スクリプトを追加するにはどうすればよいですか？
変更する必要があるのは2つだけです。
他の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から拡張機能を削除することを忘れないでください。古いオプションはそこに残り、そうしないと期待どおりに機能しません。