Question

单击扩展图标时，我需要获取活动标签的源代码;它需要在新标签中可见（因为弹出窗口限制为800px，以及其他原因）。

当我使用弹出窗口时，我没有遇到任何问题，但是，我现在想要将数据放入新标签页。

正在发生的事情是 onClicked 回调中使用的 targetTab 变量包含正确的标签信息。但是，一旦打开新选项卡（popup.html），就不会发生任何事情; document.body.innerHTML 不会被更改。

有什么想法吗？

的manifest.json

{
  "name": "Stock Alert",
  "description": "Create an alert and display streaming stock quotes.",
  "version": "1.1",
  "permissions": [
    "https://www.gwm.ml.wallst.com/",
    "https://*/*",
    "http://*/*",
    "tabs",
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_icon": "logo.png"
  },
  "manifest_version": 2
}

background.js

chrome.browserAction.onClicked.addListener(function(targetTab) {
  chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab)
  {
            chrome.tabs.executeScript( 
            targetTab.id,
            {
                code: "document.getElementsByTagName('html')[0].innerHTML;"
            }, 
            function (sourceCode)
            {
                document.getElementById('dump').innerHTML = sourceCode;
            });
  });
});

popup.html（用词不当;这是在onClicked上创建的新标签的网址）

<html>
<head>
<title>Stock Tracker</title>
<!--<script src="background.js"></script>-->
<link href="Streamer.css.package.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="out"></div>
<div id="dump"></div>
</body>
</html>

Answer 1

问题是回调函数是在后台页面上下文中执行的。因此，它会尝试在该页面内找到<div id="dump"></div>，而不是在弹出页面内。

我已经摆弄了，我想出了以下解决方案。

点击后，获取当前页面的内容
将该内容存储在后台页面中
加载popup.html
加载时，从后台页面获取代码内容

<强> background.js

var myCode;

chrome.browserAction.onClicked.addListener(function(targetTab) {
    chrome.tabs.executeScript( 
    targetTab.id,
    {
        code: "document.getElementsByTagName('html')[0].innerHTML;"
    }, 
    function (sourceCode)
    {            
        myCode = sourceCode;
        chrome.tabs.create({'url': chrome.extension.getURL('popup.html')});
    });
});

popup.html

添加<script src="popup.js"></script>

popup.js

chrome.runtime.getBackgroundPage(function(bg)
{
   document.getElementById('dump').innerHTML = bg.myCode;
});

访问扩展程序选项卡中的一个选项卡的来源

1 个答案: