简体   繁体   English

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

[英]Problems checking all boxes on another website using Javascript for Chrome Extension

I'm new to Javascript, please bear with me :( 我是Javascript的新手,请耐心等待:(

I was trying to create a Google Chrome extension that would check all of the boxes on a particular website and select the delete option they have 我正在尝试创建一个Google Chrome扩展程序,用于检查特定网站上的所有框,并选择他们拥有的删除选项

I found a link online where someone made a script that is similar to what I want at this link: 我在网上找到了一个链接,其中有人制作了一个类似于我想要的脚本:

JavaScript Check All Checkboxes JavaScript检查所有复选框

I'm creating the javascript file for my extension, I created some code just for the checking all boxes. 我正在为我的扩展创建javascript文件,我创建了一些代码,仅用于检查所有框。 It doesn't seem to work though. 它似乎不起作用。 Could you give me any tips? 你能给我一些提示吗? Here is the code I wrote so far, the extension only has this code in the .js source file and I'm only asking it to check all the boxes right now 这是我到目前为止编写的代码,扩展只在.js源文件中有这个代码,我只是要求它现在检查所有的框

I'm using the same layout as the Chrome Extension tutorial, will change that up later 我使用与Chrome扩展程序教程相同的布局,稍后会对其进行更改

Sorry for looking like a noob, please help me out guys. 抱歉看起来像一个菜鸟,请帮帮我们。 Thanks! 谢谢!

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

Here is the contents of my manifest.json 这是我的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/"
  ]
}

Here is what's in my HTML file: 这是我的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>

Okay, I shockingly did not find a duplicate (and pointing one out would be appreciated), so here's a regular answer: 好吧,我震惊地没有找到重复(并指出一个会赞赏),所以这是一个常规答案:

Your popup.html is its own, separate document. 你的popup.html是它自己独立的文档。 When you execute 当你执行

doc.getElementsByTagName('input')

you are searching the popup itself, and not the current active tab. 您正在搜索弹出窗口本身,而不是当前活动的选项卡。

As you're new to extensions, it's doubly important to carefully read the Extension Architecture overview , and even the whole overview page. 由于您不熟悉扩展,因此仔细阅读扩展架构概述甚至整个概述页面都是非常重要的。 But a quick TL;DR: only Content Scripts can actually interact with content of normal tabs. 但是快速TL; DR:只有内容脚本实际上可以与普通标签的内容进行交互。 In a content script, document refers to an actual page open in a tab, and there your code would work. 在内容脚本中, document是指在选项卡中打开的实际页面,您的代码可以使用。

You already have the "activeTab" permission, so you are allowed to inject a content script in the current page after clicking on your button. 您已拥有"activeTab"权限,因此您可以在单击按钮后在当前页面中注入内容脚本。

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

Put the code that manipulates DOM in that file content.js , and use Messaging / Storage to communicate between parts of the extension. 将操作DOM的代码放在该文件content.js ,并使用Messaging / Storage在扩展的各个部分之间进行通信。

Finally, be wary that the popup simply does not exist while it's closed - if you need to talk to something that's always there, that would be a background or event page. 最后,要小心弹出窗口在关闭时根本不存在 - 如果你需要谈论总是存在的东西,那将是一个背景事件页面。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM