logo标签列表

加载当前标签页页面源代码的Chrome扩展程序

javascriptjquerygoogle-chromegoogle-chrome-extension
3

我希望你能帮助我。

我正在尝试创建一个Chrome扩展程序，它可以将当前选项卡的源加载到一个变量中。

目前为止，我有：

manifest.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与之前的版本产生完全相同的输出，无论我激活哪个页面。
相关答案：打开新的 Google Chrome 标签并获取源代码。非常容易重用该代码以获取当前标签页的源代码（顺便提醒一下，不要忘记添加activeTab 权限）。 - Rob W
获取来自Chrome扩展的当前页面源HTML - Alon Gubkin
5个回答
2
背景脚本与当前页面隔离，因为它们被设计成不受页面内容影响而持续存在。您需要使用 chrome.tabs API，特别是 chrome.tabs.getCurrent。一旦获取了当前选项卡，就可以将代码注入到窗口中。这就是上面的代码片段的作用。
您需要在清单文件中添加 "tab" 权限。
我尝试了你的建议和其他一些我找到的方法，最终找到了一些可行的解决办法，但仍然没有达到预期效果。还有其他的想法吗？ - Matt
1
正如所指出的那样，您需要在活动选项卡的上下文中运行代码。一种方法是使用chrome.tabs.executeScript：
chrome.browserAction.onClicked.addListener( function() {
  chrome.tabs.executeScript(
    { 
      code: "document.getElementsByTagName('html')[0].innerHTML;"
    }, 
    function (ps1) {
      window.alert(ps1);
    }
  );
});
谢谢你提供的代码，但我有一个疑问。在这段代码中如何定义ps1？我尝试了 code: "var ps1 = document..." 但是弹出框返回了 undefined。 - Matt
@Matt，代码本身就可以运行，你不需要添加任何声明。回调函数将接收执行代码评估的最后一个表达式作为参数。你下面发布的答案存在的问题是，你无法在背景脚本的上下文中使用该值。 - rsanchez
1
这段代码在main.js中运行成功了！谢谢大家的提示，它们为我节省了很多时间！
chrome.browserAction.onClicked.addListener( 
  function(tab) {
   chrome.tabs.executeScript(
     null,{
       code:"var ps1 = document.getElementsByTagName('html')[0].innerHTML;            
       window.alert(ps1);"});
          }
);
0
在Chrome 47中，您需要将“activeTab”添加到权限中，否则它将无法工作。使用“tabs”也不起作用。

manifest.json:

{
"name": "Rafi extension",
"manifest_version": 2,
"version": "7",
"description": "Open something",
"browser_action": {
    "default_icon": "logo.png"
},
"permissions": [
  "activeTab"
  ],
"background": {    
"scripts": ["main.js"]}
}
0
对于任何想要在Manifest V3中实现这一点的人来说，事情变得简单得多。假设您的扩展根目录下有一个名为parse_page.js的脚本，其中包含您想要执行的任何代码：
var ps1 = document.getElementsByTagName('html')[0].innerHTML;            
window.alert(ps1);

从文档中可以看出，有两种方法可以使其执行：

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

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

每当您访问新页面时，脚本都会运行。如果您只想在特定的URL上执行它，可以调整上面的matches。

(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']
    });
});

在这个例子中，脚本将在您单击扩展图标时运行。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接