简体   繁体   中英

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

I'm new to Javascript, please bear with me :(

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

I found a link online where someone made a script that is similar to what I want at this link:

JavaScript Check All Checkboxes

I'm creating the javascript file for my extension, I created some code just for the checking all boxes. 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

I'm using the same layout as the Chrome Extension tutorial, will change that up later

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_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:

<!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. 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. In a content script, document refers to an actual page open in a tab, and there your code would work.

You already have the "activeTab" permission, so you are allowed to inject a content script in the current page after clicking on your button.

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.

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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