For*_*rTW 1 google-chrome google-chrome-extension
单击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代码).
谢谢
您的清单包含"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"],它在后台持续运行,在您当前的代码中根本不需要.如果您需要在操作按钮之外执行操作,请考虑使用事件页面.
使用Chrome API从弹出窗口的上下文进入页面.您需要查询chrome.tabs以获取活动选项卡,然后chrome.tabs.executeScript在该选项卡的上下文中调用以执行脚本.
谷歌的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.
| 归档时间： |
|
| 查看次数： |
4830 次 |
| 最近记录： |