开发一个 chrome 扩展来统计当前访问网页的 <input> 标签

Question

嘿，我是 javascript 和 chrome 扩展开发的新手。我正在尝试开发一个 chrome 扩展，它使用浏览器操作来计算 Google Chrome 浏览器当前活动选项卡中的标签数量。我可以使用 getElementsByTagName.lenght 方法来计算标签数量，我知道我可以使用控制台用于访问网页 DOM 的 API。但我不知道如何从我的 javascript 文件中调用该 API。你们知道吗？

Answer 1

要访问当前页面 DOM，您需要编写内容脚本。 1.在manifest.json中指定内容脚本

"content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]

如果您需要注入脚本，有时通过指定权限字段来使用编程注入：

{
  "name": "My extension",
  ...
  "permissions": [
    "activeTab"
  ],
  ...
}

2.在这种情况下我更喜欢后者。在popup.js中添加代码：

function printResult(result){
//or You can print the result using innerHTML
console.log(result);

}
chrome.tabs.executeScript(null, { file: 'content.js' },function(result){
   printResult(result);
});

3.在内容脚本中，您可以访问当前页面/活动标签 DOM。

var result=document.getElementsByTagName("input").length;