Javascript chrome的简单选项脚本_Javascript_Google Chrome_Google Chrome Extension

Javascript chrome的简单选项脚本

javascript google-chrome google-chrome-extension

Javascript chrome的简单选项脚本,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,我正在尝试为我的Chrome扩展创建一个选项站点。我只想知道，如果复选框1是启用脚本是运行等。。。我到处搜索，但我发现这个主题只有过时的线程。这是我的扩展名中的manifest.json： { "name": "My First Extension", "version": "1.0", "manifest_version": 2, "options_page": "options.html", "description": "The first extension th

我正在尝试为我的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>


剧本
启用脚本1
启用脚本2

我不知道我怎么能说扩展是活动的，而不是不活动的。我想我需要另一个脚本来从复选框类和也许我应该将内容脚本设置为backgrond脚本。如果有人能帮助我，那就太好了。

更新：我已经更新了使两个脚本同时运行的所有代码

好的，首先您应该将选项数据保存在localstorage中，以便可以访问所有页面中的数据。这使你的工作变得容易

为了处理数据，我创建了一个名为

global.js

的javascript文件

此文件必须手动包含在

options.html

和

content.js

的开头，或包含在

manifest.json

中

global.js 这是更新后的options.html，您将看到一些包含的js文件

jquery.min.js（您不需要使用它，我只是想让它更有用）
global.js
options.js

options.html 在

content.js

文件中，我们将获得选项，如果有一个选中的脚本，则包括脚本

content.js script1.js 脚本2.js 对于所有这些，您应该更新

manifest.json

文件

包括
```
global.js
```
到
```
content\u脚本中
```


localstorage的权限
包括script1.js和script2.js（）的web可访问资源


最后是更新后的manifest.json

manifest.json
您的脚本文件夹应该是这样的

如何添加更多脚本？
你只需要做两个改变
您可以像其他script1.js和script2.js一样将脚本添加到主文件夹，还可以将其添加到web\u-accessible\u-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中删除扩展，因为旧的选项将保留在那里，如果不这样做，就不会像您预期的那样工作 非常感谢，但是当我启用这两个脚本时，没有人可以工作。@Michael我已经更新了，现在可以同时启用这两个脚本。如果您要动态更改脚本编号，则此代码没有用处。若要添加更多脚本文件，则必须更改几乎所有页面。我建议您可以改进此代码，使其更有用（例如为脚本文件创建数组）。如果你真的不知道怎么做，告诉我，我可以再次更新我的答案。我现在没有太多时间。我已经再次更新了它，您将在下面的回答中看到一条说明，告诉您如何添加新的脚本文件。@Michael我认为问题在于您没有删除旧的脚本文件，因此localstorage没有重置，因此它正在使用旧的选项。或者你在抄写的时候一定弄错了，试试这个，它对我很有吸引力。
<!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>

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);
    });    
}

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!");
            });
        }
    });
});

alert("Hello from script1");

alert("Hello from script2");

{
  "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"
  ]
}

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
        }
    ]
};