我需要在单击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
}
弹出窗口.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>
和弹出窗口.js
window.addEventListener('DOMContentLoaded', function() {
var fbshare = document.querySelector('#check-1');
fbshare.addEventListener('click', function() {
var htmlCode = document.documentElement.outerHTML;
window.alert(htmlCode);
});
});
如何获取活动选项卡的源代码？ 我需要获取页面的源代码，以便我需要搜索页面是否包含特定的跟踪代码(如 GA 代码)。
谢谢
您的清单同时具有"content_scripts"(在document_idle上的页面上下文中运行)和"browser_action"脚本(单击扩展菜单按钮时在隔离上下文中运行)。
在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"]，它在后台持续运行，在当前代码中根本不需要。如果您需要在操作按钮之外执行操作，请考虑改用事件页面。
使用 Chrome API 从弹出式窗口的上下文获取到页面。需要查询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]);
});
});
如果你这样做，你不需要任何"content_scripts"manifest.json。你也不需要jQuery或jQuery UI或Bootstrap。