更新：

Question

我正在尝试为Chrome扩展程序创建一个选项网站。我想只是如果复选框1是启用脚本运行等... 我四处搜索，但我发现这个主题只有过时的线程。这是我的扩展程序中的manifest.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://*.example.com/*"],
      "all_frames": true,
      "js": ["script1.js", "script2.js"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "tabs", "http://*.example.com/*"
  ]
}

options.html：

<!DOCTYPE html>
<html>
<body class="uber-frame" i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize" style="font-family: &#39;Segoe UI&#39;, Tahoma, sans-serif; font-size: 125%">
<div id="main-content" align="center">
  <div id="mainview">
    <section id="scripts">
<h3>Scripts</h3>
      <label>
        <input type="checkbox" class=script1 >
        <span>Enable Script 1</span>
     </label>
    <div>
     <label>
        <input type="checkbox" class=script2>
        <span>Enable Script 2</span>
     </label>
    </div>
    </section>
  </div>
</div>
</body></html>

我不知道怎么能说扩展哪个脚本喊是活动的，哪个不是。我想我需要另一个脚本来从复选框的类中获取值可能我应该将内容脚本设置为背景脚本。如果有人可以帮助我会很棒。

Answer 1

更新：

我已更新所有代码，以使两个脚本同时运行。

好的，首先你应该在localstorage中保存选项数据，这样你就可以访问所有页面的数据。这使你的工作变得轻松。

为了操纵数据，我创建了一个名为global.js的javascript文件。

此文件必须手动或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: &#39;Segoe UI&#39;, 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

$（函数（）{ 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（Why?）的web_accessible_resources

最后这里是更新后的manifest.json

的manifest.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"
  ]
}

您的脚本文件夹应该是这样的，

enter image description here

如何添加更多脚本？

您必须进行两项更改，

您将脚本添加到主文件夹，就像其他script1.js和script2.js一样，您也会将其添加到web_accessible_resources的{{1}}。

您还将更新“global.js”，只需将新脚本对象添加到Options.Scripts数组即可。像这样。

manifest.json

就是这样。但是在加载新的更新之前不要忘记从chrome中删除扩展，因为旧的选项将保留在那里，如果不这样做，那将无法正常工作。

chrome的简单选项脚本

1 个答案:

更新：