从 Chrome 扩展访问当前 HTML 页面中的 table(s)

Question

我对 Chrome 扩展还很陌生，所以我决定做一个。现在，我需要访问页面中的表，以及有多少表，我已经可以通过分别执行 $(document).find("table") 和 $(document).find("table").length 来实现，但是使用控制台从文档中，但是，我尝试了 chrome.tabs.getCurrent 在扩展等中，但我找不到从扩展访问此数据的方法。有什么帮助吗？

这是我的代码：

popup.js:

var numOfTables = 0;
function getNumOfTables() {
    chrome.tabs.getCurrent(function(tab) {
    alert($(document).find("table").length);
    var tablesResult = $(document).find("table").length;
    numOfTables = tablesResult;
    $("#mainParagraph").text("We found " + numOfTables + " in this page");
    });
};
getNumOfTables();

popup.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>
    <h2 id="header">HTML Table to Excel</h2>
    <p id="mainParagraph"></p>
  </body>
</html>

我真的不需要任何复杂的东西，只需要一种方法来在扩展程序的当前选项卡中执行 $(document).find("table") 并获得结果，executeScript 应该可以工作，但我认为它不能 return一个函数的值。提前致谢

Answer 1

那么，您正在尝试访问当前选项卡。

chrome.tabs.getCurrent(function(tab) {
  /* and you are not using tab! */
});

只是运行这不会神奇地引用选项卡； document 仍然引用 popup.html，因此您找不到任何东西。

查看 Architecture Overview 以了解为什么 您需要内容脚本。

因此，您需要注入一个 content script with executeScript and somehow report the result back. Messaging 来帮助您。

您还需要包含自己的 jQuery 副本才能使用 $，因为它与页面的上下文不同。

首先，您需要权限。如果您要从弹出窗口注入当前选项卡，"activeTab" 就足够了。

然后，你可以用这个注入：

// popup.js
chrome.tabs.executeScript(
  null,                      // Current tab
  {file: "jquery.js"},        // Script to inject
  function() {               // Something to do afterwards
    chrome.tabs.executeScript(null, {file: "content.js"}, afterInject);
  }
);

在您的内容脚本中，准备好回答问题。

// content.js

// Ensure it's injected only once
var injected;
if(!injected) {
  injected = true;
  chrome.runtime.onMessage.addListener(handleMessage);
}

function handleMessage(message, sender, sendResponse) {
  switch(message.action) {
    case "getNumOfTables":
      sendResponse($(document).find("table").length);
    default:
      console.error("Unknown request from extension");
  }
}

最后，您可以从弹出窗口中发送一条消息来请求此操作：

// Make sure it happens after the inject
function afterInject(){
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {action: "getNumOfTables"}, function(result) {
      // Use the result here
    });
  });
}

如果没有深入的解释，不确定这段代码是否有用，但这是一个起点。

从 Chrome 扩展访问当前 HTML 页面中的 table(s)

Accessing table(s) in current HTML page from Chrome extension

javascript

google-chrome

google-chrome-extension