时间戳

首页 > 解决方案 > 如何使用 tabId 和 chrome 扩展 API 获取用户当前所在网站的 HTML 源代码？

google-chrome-extension - 如何使用 tabId 和 chrome 扩展 API 获取用户当前所在网站的 HTML 源代码？

问题描述

这是我的manifest.json：

{
  "manifest_version":2,
  "name": "Name",
  "description": "Description",
  "version":"1.0",
  "browser_action":
  {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions": [
    "tabs"
  ]
}

这是我的background.js：

chrome.tabs.onUpdated.addListener( (tabId, changeInfo, tab) => {
  if (typeof changeInfo.url !== "undefined" && changeInfo.url.startsWith("chrome://newtab/") === false){
    alert(changeInfo.url);
    //somehow get the HTML of the page given tabId and store as string
}
});

如果有人可以在这里帮助我，将不胜感激。正如我之前指定的，我需要用户看到的页面的确切 HTML。

标签： google-chrome-extension

解决方案

在 manifest.json 中添加您希望能够读取的站点（或所有站点"*://*/*"）permissions，然后使用 chrome.tabs.executeScript 将其 HTML 提取为字符串。

  • Map无法提取DOM 元素或类对象。只能提取与JSON 兼容的类型，例如字符串、数字、布尔值null和这些类型的数组/对象。

  • 弹出窗口是一个单独的窗口，因此它有自己单独的 devtools：在弹出窗口内右键单击并在菜单中选择“检查”以查看 console.log 消息。

chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  if (info.url && !info.url.startsWith('chrome')) {
    const html = await getHtml(tabId);
    console.log(html);
  }
});

function getHtml(tabId) {
  return new Promise((resolve, reject) => {
    chrome.tabs.executeScript(tabId, {
      code: 'document.documentElement.outerHTML',
    }, results =>
      chrome.runtime.lastError
        ? reject(new Error(chrome.runtime.lastError.message))
        : resolve(results[0]));
  });
}

推荐阅读