3

我希望你能帮助我。

我正在尝试在 Chrome 中创建一个扩展，它将活动选项卡的源加载到变量中。

到目前为止，我有：

清单.json

{
"name": "My Extension",
"manifest_version": 2,
"version": "0.1",
"description": "Does some simple stuff",
"browser_action": {
    "default_icon": "logo.png"
},

"background": {    
"scripts": ["main.js"]}}

main.js

chrome.browserAction.onClicked.addListener(
  function(tab) {
   var ps1 = document.getElementsByTagName('html')[0].innerHTML;
   window.alert(ps1);
});

但这会加载空白页面的页面源。我需要做什么才能获取活动页面的来源。

我已经阅读了一些内容，我认为我需要使用带有一些听力功能的内容脚本，我一直在搜索，但在我看来所有答案都非常复杂。你们中的任何人都可以给我一些简单的例子吗？

非常感谢您的反馈！

问候

AdrianCooney 回答后更新：

我将清单更改为包含

 "permissions": [
  "tabs"
  ]

然后在 main.js 我做了

chrome.browserAction.onClicked.addListener(function(activeTab) {
 chrome.tabs.query({ currentWindow: true, active: true }, 
  function (tabs) {
   var ps1=document.getElementsByTagName('html')[0].innerHTML;
   window.alert(ps1);
 })
});

当我按下扩展按钮时，我得到类似的东西

<html></html>
  <body><script src="main.js"></script>
  </body>

...无论我有什么标签。

再次尝试使用 chrome.tabs.getCurrent

chrome.browserAction.onClicked.addListener(function(activeTab) {
 chrome.tabs.getCurrent(
  function (tabs) {
   var ps1=document.getElementsByTagName('html')[0].innerHTML;
   window.alert(ps1);
  })
 });

上面版本的 main.js 提供与之前完全相同的输出，无论我有哪个页面处于活动状态。

4

5 回答 5

2

后台脚本与当前页面隔离，因为它们被设计为无论页面内容如何都是持久的。您需要使用chrome.tabsAPI，特别是chrome.tabs.getCurrent. 拥有当前选项卡后，您可以将代码注入窗口。这就是你上面的片段出现的地方。

您需要在清单文件中为您的权限添加“选项卡”。

于 2013-09-02T15:25:50.763 回答
1

main.js 下的这段代码有效！！！谢谢你们的提示，他们为我节省了很多时间！

chrome.browserAction.onClicked.addListener( 
  function(tab) {
   chrome.tabs.executeScript(
     null,{
       code:"var ps1 = document.getElementsByTagName('html')[0].innerHTML;            
       window.alert(ps1);"});
          }
);
于 2013-09-03T09:18:46.210 回答
1

正如所指出的，您需要在活动选项卡的上下文中运行代码。一种方法是使用chrome.tabs.executeScript：

chrome.browserAction.onClicked.addListener( function() {
  chrome.tabs.executeScript(
    { 
      code: "document.getElementsByTagName('html')[0].innerHTML;"
    }, 
    function (ps1) {
      window.alert(ps1);
    }
  );
});
于 2013-09-02T21:26:21.323 回答
0

在 Chrome 47 中你需要将“activeTab”添加到权限中，否则它不起作用。使用“标签”它不起作用。

清单.json：

{
"name": "Rafi extension",
"manifest_version": 2,
"version": "7",
"description": "Open something",
"browser_action": {
    "default_icon": "logo.png"
},
"permissions": [
  "activeTab"
  ],
"background": {    
"scripts": ["main.js"]}
}
于 2015-12-04T16:43:30.323 回答
0

对于任何希望使用Manifest V3执行此操作的人来说，事情要简单得多。假设您在扩展的根目录中有一个脚本parse_page.js，其中包含您要执行的任何代码：

var ps1 = document.getElementsByTagName('html')[0].innerHTML;            
window.alert(ps1);

从docs，有两种方法可以让它执行：

(1) 使用静态声明注入：对需要自动运行的脚本使用此方法。只需将以下内容添加到您的manifest.json：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["parse_page.js"]
  }
],

每当您访问新页面时，该脚本都会运行。matches如果您只希望它在某些 URL 上执行，您可以调整上述内容。

(2) 以编程方式注入：将此方法用于需要响应事件或特定场合运行的脚本。将以下内容添加到您的manifest.json：

"permissions": ["activeTab", "scripting"],
"background": {
  "service_worker": "background.js"
},
"action": { }

接下来，在background.js中，添加以下内容：

chrome.action.onClicked.addListener((tab) => {
    chrome.scripting.executeScript({
        target: { tabId: tab.id },
        files: ['parse_page.js']
    });
});

在此示例中，只要您单击扩展程序的图标，脚本就会运行。

于 2021-11-25T00:32:00.363 回答