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

我需要在点击Chrome扩展程序图标时获取当前选项卡的源代码。我也试着用按钮点击事件。请通过我当前的代码：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代码）。

谢谢

来源

2017-04-20 ForTW

请定义“源代码”。你的意思是HTML吗？脚本？ CSS？ – Makyen

您正在为popup或作为内容脚本加载* popup1.js *。这几乎总是一个坏主意™。你应该只加载它作为一个或另一个。除了库之外的任何脚本文件在这两者之间共享是非常罕见的。 – Makyen

*请不要将jQuery，jQueryUI和BootStrap加载到每个**页面（'content_scripts'和''matches''），除非**需要**。 jQuery本身就是最小化代码的85kB。这是放置在每一页上的重要负担。我们这些拥有100个标签的人是什么意思？虽然有可能你真的需要*加载所有这些库，但你应该加载所需的绝对最小*，以允许用户开始与你的扩展进行交互（例如静态图像和事件处理程序W/O库），然后动态加载一旦用户实际与您的扩展进行交互，所有内容 – Makyen

您的清单既有"content_scripts"和"browser_action"脚本（点击扩展菜单按钮时，在一个孤立的背景下，其运行）（在页面上document_idle的上下文中运行）。

在popup.html您引用popup.js，所以在popup.js当你调用document.documentElement.outerHTML你得到的popup.html内容，不激活的标签。

您参考popup.js和popup1.js，这是混淆。您目前在弹出窗口和页面上下文中都运行相同的代码，这几乎可以保证在其中一个或另一个中断。按照惯例，在"content_scripts"中使用content.js并且在动作popup.html中使用参考popup.js。

"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来允许使用promise（还有其他库也可以这样做）。

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

如果你这样说，你不需要任何manifest.json"content_scripts"。你不需要jQuery或jQuery UI或Bootstrap。

来源

2017-04-20 06:29:33 Keith

谢谢基思！你的代码非常有帮助:) – ForTW

@ForTW欢呼声。如果这回答你的问题，请点击左边的绿色勾号选择它作为答案。如果没有，请让我知道你还需要什么。 – Keith

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

回答

相关问题