Question

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

这是我的代码：

popup.js ：

chrome.tabs.getCurrent

popup.html ：

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();

我真的不需要任何复杂的东西，只需要在扩展程序的当前标签中执行<!doctype 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>  <script src="popup.js"></script> </head> <body> <h2 id="header">HTML Table to Excel</h2> <p id="mainParagraph"></p> </body> </html>并获得结果，executeScript应该可以工作，但我不认为它可以返回函数的值。提前致谢

Answer 1

因此，您正在尝试访问当前标签。

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

只是运行它不会神奇地引用标签; document仍然引用popup.html，因此您找不到任何内容。

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

因此，您需要使用executeScript注入content script并以某种方式报告结果。 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页面中的表格

1 个答案: