Question

点击Chrome扩展程序图标时，我需要获取当前标签的源代码。我也试过按钮点击事件。请仔细阅读我目前的代码：

的manifest.json

    {  "name": "UM Chrome Extension!",  "version": "1.0",
  "description": "To ensure the tracking codes present.",
    "icons": {
"128": "TW-Extension-Icon2.png"
},   "background": {
      "scripts": [ "background.js"]
   }, 
  "content_scripts": [
    {
      "matches": ["http://*/*"],  
      "js": ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"]
    }
    ], 
    "permissions": [
    "activeTab","tabs","contextMenus", "http://*/*"
  ],

  "browser_action": {
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

popup.html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <script type="text/javascript" src="popup1.js"></script>
    </head>

    <body style="width: 600px; height: 300px;">
<button value="Test" id="check-1"> </button>
</body>
</html>

和popup.js

window.addEventListener('DOMContentLoaded', function() {
var fbshare = document.querySelector('#check-1');
    fbshare.addEventListener('click', function() {
        var htmlCode = document.documentElement.outerHTML;
     window.alert(htmlCode);
      });

});

如何获取活动标签的源代码？我需要获取页面的源代码，以便我需要搜索该页面是否包含特定的跟踪代码（如GA代码）。

谢谢

Answer 1

您的清单包含"content_scripts"（在document_idle页面的上下文中运行）和"browser_action"脚本（在单击扩展菜单按钮时在独立的上下文中运行）

在popup.html中，您引用了popup.js，因此当您致电popup.js时，document.documentElement.outerHTML中的内容为popup.html，而非活动标签。

您同时引用popup.js和popup1.js，这令人困惑。您当前在弹出窗口和页面上下文中都运行相同的代码，这几乎可以保证在一个或另一个中断。按照惯例，在content.js中使用"content_scripts"，在popup.js行动中使用popup.html。

"content_scripts"在每个页面中运行，无论用户是否点击了扩展程序。您当前的清单是将["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"]添加到每个页面，这是不必要的慢。

避免在Chrome扩展程序中使用jQuery。它非常大，当您完全确定所有用户都在Chrome上时，浏览器标准化库不会增加太多。如果没有它就无法编码，那么尝试将其限制为弹出窗口或动态加载。

您设置了"scripts": [ "background.js"]，它在后台持续运行，在您当前的代码中完全不需要。如果您需要在操作按钮之外执行操作，请考虑使用event pages。

使用Chrome API从弹出窗口的上下文进入页面。您需要query chrome.tabs才能获取活动标签，然后调用chrome.tabs.executeScript以在该标签的上下文中执行脚本。

Google的API使用回调，但在此示例中，我将使用chrome-extension-async来允许使用promises（还有其他库可以执行此操作）。

在popup.html中（假设您使用bower install chrome-extension-async）：

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="bower_components/chrome-extension-async/chrome-extension-async.js"></script>
    <script type="text/javascript" src="popup.js"></script>
</head>

<body style="width: 600px; height: 300px;">
    <button value="Test" id="check-1"> </button>
</body>
</html>

在popup.js中（放弃popup1.js）：

function scrapeThePage() {
    // Keep this function isolated - it can only call methods you set up in content scripts
    var htmlCode = document.documentElement.outerHTML;
    return htmlCode;
}

document.addEventListener('DOMContentLoaded', () => {
    // Hook up #check-1 button in popup.html
    const fbshare = document.querySelector('#check-1');
    fbshare.addEventListener('click', async () => {
        // Get the active tab
        const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
        const tab = tabs[0];

        // We have to convert the function to a string
        const scriptToExec = `(${scrapeThePage})()`;

        // Run the script in the context of the tab
        const scraped = await chrome.tabs.executeScript(tab.id, { code: scriptToExec });

        // Result will be an array of values from the execution
        // For testing this will be the same as the console output if you ran scriptToExec in the console
        alert(scraped[0]);
    });
});

如果您这样做，"content_scripts"中不需要任何manifest.json。您也不需要jQuery或jQuery UI或Bootstrap。

Chrome扩展程序：获取活动标签的源代码

1 个答案: