引用地址:https://blog.csdn.net/weixin_35253082/article/details/117801223?spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down.none-task-blog-2defaultOPENSEARCHdefault-17.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task-blog-2defaultOPENSEARCHdefault-17.nonecase
chrome擴展,在popup頁面,給頁面對象綁定點擊事件,獲取當前tab加載頁面的DOM對象信息。本chrome擴展功能主要用於獲取百度搜索輸入框中用戶輸入的關鍵字。效果如下
0053172346.jpg
源代碼如下注意:以下文件全部以utf-8文件編碼保存
manifest.json
{undefined
"name": "chrome擴展獲取頁面dom對象信息",
"manifest_version": 2,
"version": "1.0",
"author":"showbo,http://www.coding123.net",
"description": "chrome擴展,在popup頁面,給頁面對象綁定點擊事件,獲取當前tab加載頁面的DOM對象信息。本chrome擴展功能主要用於獲取百度搜索輸入框中用戶輸入的關鍵字。",
"browser_action": {"default_popup": "popup.html"},
"content_scripts": [{"matches": ["😕//*"],"js": ["baidu.js"]}],
"permissions": ["😕//*","tabs"]
}
popup.html注意事項:chrome擴展不支持inline-script,綁定事件的代碼需要放到外部js文件中,也不能直接在DOM對象上添加click事件html>
chrome extension獲取頁面DOM對象
browser_action中的default_popup指定的頁面
頁面中DOM對象如何綁定事件並且獲取當前頁面的DOM對象信息
點擊獲取百度搜索輸入框中的關鍵字
bindEvent.jsvar a = document.getElementById('a');
a.onclick = function () {//給對象綁定事件
chrome.tabs.getSelected(null, function (tab) {//獲取當前tab
//向tab發送請求
chrome.tabs.sendRequest(tab.id, { action: "GetBaiduKeyWord" }, function (response) {undefined
alert(response.kw);
});
});
}baidu.jschrome.extension.onRequest.addListener(//監聽擴展程序進程或內容腳本發送的請求
function (request, sender, sendResponse) {undefined
if (request.action == "GetBaiduKeyWord") {undefined
sendResponse({ kw: document.forms[0].wd.value });
}
}
);注意:chrome.tabs.sendRequest和chrome.extension.onRequest這2個對象在版本的chrome中將被廢棄,使用chrome.runtime.sendMessage和chrome.runtime.onMessage代替。
由於本人的chrome版本為25,好像沒有支持chrome.runtime對象,chrome.runtime為undefined(據說 chrome.runtime 對象chrome22+就支持了。搞毛。。?),懶得升級chrome,所以就沒用chrome.runtime對象。
所以如果chrome擴展出錯沒有效果,可能是這2個對象的問題。