Javascript DOM Chrome扩展简单脚本

Javascript DOM Chrome Extension simple Script

本文关键字：简单 脚本 扩展 Chrome DOM Javascript      更新时间：2023-09-26

我为Firefox做了一个扩展，随机检查所有单选按钮&网站上的复选框。现在我将为Chrome制作它。

JS（inject.js）：

function randomFromTo(from, to){
       return Math.floor(Math.random() * (to - from + 1) + from);
}
function autoFill () {
    for (i = 0; i < document.forms.length ;i++) {
        for (j = 0; j < document.forms[i].length ;j++) {
            if (document.forms[i].elements[j].type == "radio") {
                start = j;
                lastName = document.forms[i].elements[j].name;
                while (j < document.forms[i].length - 1 && lastName == document.forms[i].elements[j+1].name) {
                    j++;
                }
                rand = randomFromTo(start, j);
                document.forms[i].elements[rand].checked = true;
            }
            if (document.forms[i].elements[j].type == "checkbox") {
                start = j;
                lastName = document.forms[i].elements[j].name;
                while (j < document.forms[i].length - 1 && lastName == document.forms[i].elements[j+1].name) {
                    j++;
                }
                rand = randomFromTo(start, j);
                document.forms[i].elements[rand].checked = true;
            }
        }
    }
}
autoFill();

所以我读了很多关于inject.js和内容脚本的文章，所以我都试过了。并把它做成这样。

{
  "name": "Auto Check Radio 'u0026 Checkbox",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "",
  "homepage_url": "",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "default_locale": "en",
  "background": {
    "page": "src/bg/background.html",
    "persistent": true
  },
  "browser_action": {
    "default_icon": "icons/icon16.png",
    "default_title": "Autocheck",
    "default_popup": "src/browser_action/browser_action.html"
  },
  "permissions": [
    "tabs",
    "notifications",
    "http://*/",
    "http://*/*",
    "https://*/*"
  ],
  "content_scripts": [{
    "matches": ["https://*/*", "http://*/*"],
    "js": ["src/inject/inject.js"],
    "run_at": "document_end"
  }],
    "web_accessible_resources": ["src/inject/inject.js"],
      "js": ["src/inject/inject.js"]
    }
  ]
}

但我不知道如何运行代码。在Firefox上，这要容易得多
我不需要任何background.html或browser_action.html

我只想通过单击图标在当前选项卡中运行脚本。

有人能告诉我把剧本放在哪里吗？

请先阅读Overview文档。尤其是架构部分。

任何与页面DOM交互的代码都必须在内容脚本中。您已经将代码放入src/inject.js中。

  1. 现在，单击按钮时不需要弹出任何UI，因此从清单及其HTML中删除"default_popup"项。

  2. 您也不希望您的代码在加载选项卡时随机执行。这就是清单中"content_scripts"部分的内容，所以只需删除它。

  3. 最后，您不需要背景HTML文件。它们已被根据脚本列表构建的自动生成页面所取代。因此：

      "background": {
    "scripts": ["src/bg/background.js"]
  },
  "browser_action": {
    "default_icon": "icons/icon16.png",
    "default_title": "Autocheck"
  },

  4. 现在，后台脚本的唯一工作就是为按钮单击注册一个处理程序。这是通过browserAction API完成的：

    // src/bg/background.js
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(tab.id, {file: "src/inject/inject.js"});
});

就是这样，在这一点上它应该起作用。

现在，为了减肥。

  1. 您不需要持久的后台页面，因为它所做的只是保留不保存任何状态信息的简单事件侦听器。您可以安全地将"persistent": false添加到清单中。

  2. 你的权限太夸张了。有一个方便的activeTab权限，如果您的代码是通过按下浏览器操作按钮调用的，它可以让您访问当前页面。

    事实上，这是您的代码所需要的唯一权限。它将处理executeScript呼叫。

      "permissions" : ["activeTab"],
相关文章：