我想获取网页的 HTML，但我获取的是 chrome 扩展程序的 HTML

发布于 2025-01-09 14:48:53 字数 2434 浏览 2 评论 0原文

我想提取网页的 HTML，以便可以对其进行分析并向我的 Chrome 扩展程序发送通知。有点像广告拦截器在分析网页上的广告时如何执行此操作，然后告诉扩展程序有多少可能的广告。

我试图在内容脚本中使用 document 对象来获取 HTML，但是，我似乎总是获取 popup< 的 HTML /strong> 文件代替。有人可以帮忙吗？

content-script.js


chrome.tabs.onActivated.addListener(function(activeInfo) {
  chrome.tabs.get(activeInfo.tabId, function(tab) {
    console.log("[content.js] onActivated");

    chrome.tabs.sendMessage(
      activeInfo.tabId,
      {
        content: document.all[0].innerText,
        type: "from_content_script",
        url: tab.url
      },
      {},
      function(response) {
        console.log("[content.js]" + window.document.all[0].innerText);
      }
    );
  });
});

chrome.tabs.onUpdated.addListener((tabId, change, tab) => {
  if (tab.active && change.url) {
    console.log("[content.js] onUpdated");

    chrome.tabs.sendMessage(
      tabId,
      {
        content: document.all[0].innerText,
        type: "from_content_script",
        url: change.url
      },
      {},
      function(response) {
        console.log("[content.js]" + window.document.all[0].innerText);
      }
    );
  }
});

background.js


let messageObj = {};
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // Arbitrary string allowing the background to distinguish
  // message types. You might also be able to determine this
  // from the `sender`.
  if (message.type === "from_content_script") {
    messageObj = message;
  } else if (message.type === "from_popup") {
    sendResponse(messageObj);
  }
});

manifest.json< /em>

{
  "short_name": "Extension",
  "version": "1.0.0",
  "manifest_version": 3,
  "name": "My Extension",
  "description": "My Extension Description",
  "permissions": ["identity", "activeTab", "tabs"],
  "icons": {
    "16": "logo-16.png",
    "48": "logo-48.png",
    "128": "logo-128.png"
  },
  "action": {
    "default_icon": "ogo_alt-16.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["./static/js/content-script.js"],
      "run_at": "document_end"
    }
  ],
  "background": {
    "service_worker": "./static/js/background.js"
  }
}

原文

I want to extract the HTML of a webpage so that I can analyze it and send a notification to my chrome extension. Sort of like how an adblocker does it when analyzing a web page for ads and then tell the extension how many possible ads there are.

I am trying to use the document object in content-scripts to get the HTML, however, I always seem to get the HTML of my popup file instead. Can anybody help?

content-script.js


chrome.tabs.onActivated.addListener(function(activeInfo) {
  chrome.tabs.get(activeInfo.tabId, function(tab) {
    console.log("[content.js] onActivated");

    chrome.tabs.sendMessage(
      activeInfo.tabId,
      {
        content: document.all[0].innerText,
        type: "from_content_script",
        url: tab.url
      },
      {},
      function(response) {
        console.log("[content.js]" + window.document.all[0].innerText);
      }
    );
  });
});

chrome.tabs.onUpdated.addListener((tabId, change, tab) => {
  if (tab.active && change.url) {
    console.log("[content.js] onUpdated");

    chrome.tabs.sendMessage(
      tabId,
      {
        content: document.all[0].innerText,
        type: "from_content_script",
        url: change.url
      },
      {},
      function(response) {
        console.log("[content.js]" + window.document.all[0].innerText);
      }
    );
  }
});

background.js


let messageObj = {};
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // Arbitrary string allowing the background to distinguish
  // message types. You might also be able to determine this
  // from the `sender`.
  if (message.type === "from_content_script") {
    messageObj = message;
  } else if (message.type === "from_popup") {
    sendResponse(messageObj);
  }
});

manifest.json

{
  "short_name": "Extension",
  "version": "1.0.0",
  "manifest_version": 3,
  "name": "My Extension",
  "description": "My Extension Description",
  "permissions": ["identity", "activeTab", "tabs"],
  "icons": {
    "16": "logo-16.png",
    "48": "logo-48.png",
    "128": "logo-128.png"
  },
  "action": {
    "default_icon": "ogo_alt-16.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["./static/js/content-script.js"],
      "run_at": "document_end"
    }
  ],
  "background": {
    "service_worker": "./static/js/background.js"
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

中性美 2025-01-16 14:48:53

您当前的内容脚本无法运行，因为内容脚本无法访问 chrome.tabs API。如果它对您有用，唯一的解释是您将其加载到弹出窗口中，这是错误的，因为弹出窗口不是网页，而是带有 chrome-extension:// 的单独页面网址。

对于您当前的目标，根本不需要后台脚本，因为您只需从弹出窗口直接向内容脚本发送消息即可获取数据。由于您按需显示信息，因此无需在所有站点中始终运行内容脚本，即您可以从 manifest.json 中删除 content_scripts 并从弹出窗口中按需注入代码。

TL；博士。从manifest.json中删除content_scripts和background，删除background.js和content-script.js文件。

manifest.json:

  "permissions": ["activeTab", "scripting"],

popup.html:

<body>
your UI
<script src=popup.js></script>
</body>

popup.js:

(async () => {
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
  let result;
  try {
    [{result}] = await chrome.scripting.executeScript({
      target: {tabId: tab.id},
      func: () => document.documentElement.innerText,
    });
  } catch (e) {
    document.body.textContent = 'Cannot access page';
    return;
  }
  // process the result
  document.body.textContent = result;
})();

如果你想自动分析页面并在图标上显示一些数字，那么你将需要后台脚本，可能还需要manifest.json中的content_scripts，但这是另一项任务。

Your current content script is nonfunctional because content scripts cannot access chrome.tabs API. If it kinda worked for you, the only explanation is that you loaded it in the popup, which is wrong because the popup is not a web page, it's a separate page with a chrome-extension:// URL.

For your current goal, there's no need for the background script at all because you can simply send a message from the popup to the content script directly to get the data. Since you're showing the info on demand there's also no need to run the content scripts all the time in all the sites i.e. you can remove content_scripts from manifest.json and inject the code on demand from the popup.

TL;DR. Remove content_scripts and background from manifest.json, remove background.js and content-script.js files.

manifest.json:

  "permissions": ["activeTab", "scripting"],

popup.html:

<body>
your UI
<script src=popup.js></script>
</body>

popup.js:

(async () => {
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
  let result;
  try {
    [{result}] = await chrome.scripting.executeScript({
      target: {tabId: tab.id},
      func: () => document.documentElement.innerText,
    });
  } catch (e) {
    document.body.textContent = 'Cannot access page';
    return;
  }
  // process the result
  document.body.textContent = result;
})();

If you want to to analyze the page automatically and display some number on the icon then you will need the background script and possibly content_scripts in manifest.json, but that's a different task.

回复收藏 0 原文

~没有更多了~