活动标签上的html中的搜索元素（javascript）

Question

我正在尝试创建自己的Google chrome扩展，以搜索html中的某些信息。重要提示：在活动标签中搜索。

我的popup.js的示例

chrome.tabs.query( {
active: true,
lastFocusedWindow: true},

function(array_of_Tabs) {
var tab = array_of_Tabs[0];

chrome.tabs.executeScript(tab.id, {code: "chrome.runtime.sendMessage(document.getElementById('hour').innerHTML));"});

chrome.runtime.onMessage.addListener(function(request) {
document.getElementById('hour').innerHTML = request;});

我的manifest.json文件：

 {
 "name": "HTML opener",
 "description": "Open the current page in popup window",
 "version": "1.0",
 "permissions": [
 "activeTab"
  ],
  "browser_action": {
 "default_title": "HTML opener",
 "default_popup": "popup.html"
 },
 "manifest_version": 2
 }

我的popup.html看起来像：

<style>
  body {
    min-width: 300px;
    overflow-x: hidden;
  }
</style>
<script src="popup.js"></script>

我没有任何结果。 有什么方法可以使用chrome.tabs在当前打开的选项卡上的html中查找文本吗？

Answer 1

这是一个示例，该示例自动在当前页面（标签）上搜索元素id=hour 。

注意：我还添加了一些代码来向用户显示操作图标。

manifest.json

...
"page_action" :
{
    "default_icon" : "icon.png",
    "default_title" : "Icon title!"
},
"content_scripts" : [
{
  "matches" : [
    "http://*/*",
    "https://*/*"
  ],
  "js" : ["contentscript.js"],
  "run_at" : "document_idle",
  "all_frames" : false
}
],
...

contentscript.js

if (document.getElementById('hour')) {
    chrome.extension.sendRequest({}, function(response) {});
    // You can do whatever you want here ...
}

background.js

function onRequest(request, sender, sendResponse) {
    chrome.pageAction.show(sender.tab.id); // Chrome will show a pageAction icon
    sendResponse({});
};

chrome.extension.onRequest.addListener(onRequest);