开发者问题收集

为什么.js代码可以通过控制台运行，而不能以插件的形式运行？

2024-02-12
81
javascript google-chrome google-chrome-extension chromium google-docs

我正在尝试删除一个元素 为此，我尝试在 .js 中制作一个小插件 我已经针对我想要使用的这个特定的 google 表单定制了这个插件，出于某种原因，我在 docs.google.com 上遇到的问题比在其他网站上遇到的问题更多 

// content.js
const element = document.getElementsByClassName("xxxxxx");
element[0].remove();

“xxxxx”是保存电子邮件显示的块的类，我在这里更改了它，不知道是否可以用它来提取电子邮件

当我手动将代码粘贴到控制台中时，它会按我想要的方式工作， 但如果我通过插件运行它，它会给我一个错误代码： “未捕获的类型错误：无法读取未定义的属性（读取'remove'）”

编辑： 根据请求的 manifest.json 和计时器，我敢打赌还有更好的方法它 

//manifest.json
{
  "manifest_version": 3,
  "name": "Auto Delete xxxxxx Elements",
  "version": "1.0",
  "description": "A Chrome extension to automatically delete elements containing the class 'xxxxxx' on doc.google.com.",
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["*://docs.google.com/*"],
      "js": ["content.js"]
    }
  ]
}

// background.js
chrome.runtime.onInstalled.addListener(() => {
    setInterval(() => {
      chrome.tabs.query({ url: "*://docs.google.com/*" }, tabs => {
        tabs.forEach(tab => {
          chrome.scripting.executeScript({
            target: { tabId: tab.id },
            files: ['content.js']
          });
        });
      });
    }, 1000); // 1000 milliseconds = 1 second
  });
2个回答

当您尝试访问其 remove() 方法时，element[0] 似乎未定义。 插件可能在元素加载到页面之前执行。

您可以更改插件代码，等待页面加载，然后再调用 remove 函数，该函数通过 DOMContentLoaded 事件或 window.onload 事件删除元素。

类似以下内容： 

document.addEventListener('DOMContentLoaded', function() {
    const element = document.getElementsByClassName("xxxxxx");
    if (element.length > 0) {
        element[0].remove(); 
    } else {
        console.error("Element with class 'xxxxxx' not found.");
    }
});

因此，在这里它会等待 DOMContentLoaded 事件，然后再调用 remove()。 它还会在尝试删除类为“xxxxxx”的元素之前检查该元素是否存在。

编辑：尝试对 background.js 执行此操作 

chrome.runtime.onInstalled.addListener(() => {
    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
        if (changeInfo.status === 'complete' && tab.url.startsWith('https://docs.google.com/')) {
            chrome.scripting.executeScript({
                target: { tabId: tabId },
                files: ['content.js']
            });
        }
    });
});
Joshua George
2024-02-12

我并不是那么熟练，但是您可能会因为所有嵌套而收到该错误，请尝试一下。 

const element = document.getElementsByClassName("xxxxxx");
element[0].innerHTML = "";
element[0].remove();

此外，请确保在插件执行代码之前网站已完全加载。

EmetsAlt
2024-02-12