使用Javascript for Chrome Extension检查其他网站上的所有框的问题

时间:2016-07-19 21:04:07

标签: javascript google-chrome-extension

我是Javascript的新手,请耐心等待:(

我试图创建一个Google Chrome扩展程序,用于检查特定网站上的所有框,并选择他们拥有的删除选项

我在网上找到了一个链接,其中有人制作了一个类似于我想要的脚本:

JavaScript Check All Checkboxes

我正在为我的扩展程序创建javascript文件,我创建了一些代码,仅用于检查所有框。它似乎不起作用。你能给我一些提示吗?这是我到目前为止编写的代码,扩展只在.js源文件中有这个代码,我只是要求它立即检查所有框

我使用与Chrome扩展程序教程相同的布局,稍后会更改

抱歉看起来像个菜鸟,请帮帮我们。谢谢!

function check_all_in_document(doc){
  var c=new Array();
  c=doc.getElementsByTagName('input');
  for(var i=0;i<c.length;i++){
    if(c[i].type=='checkbox'){
      c[i].checked=true;
    }
  }
}

document.addEventListener("DOMContentLoaded", function()
  {
    check_all_in_document(window.document);
    for(var j=0;j<window.frames.length;j++){
      check_all_in_document(window.frames[j].document);
}
});

这是我的manifest.json

的内容
{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "2.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

以下是我的HTML文件中的内容:

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
      }
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 400px;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="status"></div>
    <img id="image-result" hidden>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

好吧,我惊讶地发现没有重复(指出一个会很感激),所以这里是一个常规答案:

您的popup.html是它自己独立的文件。执行时

doc.getElementsByTagName('input')

您正在搜索弹出窗口,而不是当前活动标签。

由于您不熟悉扩展程序,因此仔细阅读Extension Architecture overview甚至整个概述页面都非常重要。但是快速TL; DR:只有Content Scripts实际上可以与普通标签的内容进行交互。在内容脚本中,document是指在标签页中打开的实际页面,您的代码可以使用。

您已拥有"activeTab"权限,因此您可以在点击按钮后在当前页面中注入内容脚本。

chrome.tabs.executeScript(null, {file: "content.js"}); // null for current tab

将操作DOM的代码放在该文件中content.js,并使用Messaging / Storage在扩展的各个部分之间进行通信。

最后,要小心,弹出窗口在关闭时根本不存在 - 如果你需要谈论总是在那里的东西,那就是background或{{3页面。