資訊專欄INFORMATION COLUMN
摘要：相當于發一個命令。這個函數能獲取到當前標簽的信息對象并傳遞給回調函數。向標簽頁中的發送消息。接收到消息，執行操作。會彈出一個控制臺。這樣我們就完成了一個簡單的插件。
最近突然覺得有些常用的功能可以寫成瀏覽器插件，就不用把代碼放到console控制臺運行了。只要點擊插件圖標就可以自動運行。會方便很多。就去查了下chrome插件開發教程。本質上講，chrome插件就是以一些特殊的方式運行一些特定的html,css,JavaScript代碼，前端同學們學起來還是很容易的。
比較好的中文的參考資料：
1.360翻譯的文檔：http://open.chrome.360.cn/ext...
2.Chrome擴展及應用開發：http://www.ituring.com.cn/min...
我們做一個簡單的插件：實現點擊插件圖標可以給頁面上所有的a標簽加上一個target="_blank"，讓點所有鏈接都在新頁面打開。
我們開發的應用這樣使用：
1.建立一個文件夾。a chrome plugin。
2.新建配置文件 manifest.json。前端同學們對于這樣的配置文件一定不陌生。
里同包含了版本號，插件名稱，默認頁面，content_scripts，permissions等基本信息。
這個文件能將我們插件中的的js，css,JavaScript文件組織起來。
具體每個參數的含義見文檔：http://open.chrome.360.cn/ext...
代碼：
{
"manifest_version": 2,
"name": "A",
"version": "1.0",
"description": "新標簽打開鏈接",
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts":[
{
"matches": ["http://*/*","https://*/*"],
"js": ["back.js"],
"run_at":"document_end"
}
],
"permissions": [
"tabs"
]
}
3.建立文件。popup.html。
對應配置文件中的 "default_popup": "popup.html"。
點圖標的時候我們會加載運行這個html，運行這個html引入的js。
這是一個普通的html頁面。里面可以寫css。也可以加載JavaScript文件。也可以給里面的節點添加事件什么的。
不過這個文件以及加載的js無法訪問當前我們打開的標簽頁中的dom節點。
代碼：
這是popup.html里面。
這里只用來加載一個js。
4.popup.js。 popup.html引入的js。這里我們用戶它的做的事是向content_scripts中發送一個消息。相當于發一個命令。告訴content script，去辦事吧。content_scripts的內容在后面，看完再回過來看一次這里。
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
// console.log(response.farewell);
});
});
chrome.tabs.getSelected()這個函數能獲取到當前標簽的信息對象并傳遞給回調函數?！?br>獲取到tabId就是tab.id。可以自己console.log(tab)出來看一下。文章后面有對應調試控制臺的打開方式。tab相關的接口可以查看：http://open.chrome.360.cn/ext... 很多接口都要用到這個參數：tabId ( integer )，其實就是用這個接口拿到tabId。
chrome.tabs.sendRequest()這個函數是向某個標簽的content_script中發送一個消息。也需要tabId這個參數。chrome插件之間的通信接口可查看 ：http://open.chrome.360.cn/ext...
5.back.js。也是我們這個插件中的content script。
這個文件是我們插入到當前標簽頁中運行的代碼。它可以訪問標簽頁面中的dom節點。
我們這里用它來是監聽消息，消息來了就運行設置標簽的函數。操作標簽頁中的dom節點。
對應配置文件中content_scripts下的back.js。
這個參數中的內容會被加載到當前打開的網頁中，可以訪問當前標簽頁的節點。
所以，我們對頁面的操作往往會寫在這個腳本里。有需要的話甚至可以加載個jQuery到里面。
但是這里的JavaScript與網頁上原本的JavaScript不是一個環境下運行。具體區別可以自己去看開發文檔。http://open.chrome.360.cn/ext...
代碼：
function setA(){
var aDoms = document.getElementsByTagName("a");
var len = aDoms.length;
for (var i = 0; i < len; i++) {
aDoms[i].setAttribute("target","_blank")
}
}
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello"){
setA();
// sendResponse({farewell: "goodbye"});
}else{
// sendResponse({});
}
}
);
可能比較要注意的一點是popup.html與content_script之間的通信。
popup.html向標簽頁中的content_script發送消息。
content_script接收到消息，執行操作。
6.調試方式：
popup.html加載的js調試。
右鍵點擊插件圖標，選擇審查彈出內容。（或者在彈出框里右鍵點擊檢查。）會彈出一個控制臺。
點source可以看到我們的html和js資源。
content_script的調試：
打開頁面控制臺，點sources，然后點Contents scripts，可以看到瀏覽器插件會作用到頁面的代碼。
注意每次修改了代碼要重新加載插件。
這樣我們就完成了一個簡單的chrome插件。
github:https://github.com/liusaint/J...
本文同步發表在我的csdn博客上：http://blog.csdn.net/liusaint...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80953.html
摘要：這是本人寫的第一個擴展，這個擴展的普遍適用性不強，但是確實很方便，具體的開發流程寫在這里，感興趣的看官可以試著自己動手寫一寫這個擴展的作用是，它的適用場景是更換百度搜索頁的關鍵詞，并且跳轉，如果你理解了這個意思，那你一定會想這能有什么用，是 這是本人寫的第一個chrome擴展，這個擴展的普遍適用性不強，但是確實很方便，具體的開發流程寫在這里，感興趣的看官可以試著自己動手寫一寫 這個擴展...
摘要：對的兩個主要拓展是選擇和。以下插入標記的拓展已經納入了規范。在寫模式下，會根據指定的字符串創建新的子樹，然后用這個子樹完全替換調用元素。在刪除帶有時間處理程序或引用了其他對象子樹時，就有可能導致內存占用問題。 盡管DOM作為API已經非常完善了，但為了實現更多功能，仍然會有一些標準或專有的拓展。2008年之前，瀏覽器中幾乎所有的拓展都是專有的，此后W3C著手將一些已經成為事實標準的專...
摘要：配置文件每一個擴展都有一個格式的文件，叫。此消息發送后會觸發擴展內每個頁面的事件。和持續長時間的保持會話需要在和擴展建立一個長時間存在的通道。內容腳本發送消息到擴展程序建立通道，并給通道命名利用通道發送一條消息。 這次的練習是做一個Chrome的擴展，分享一下入門開發過程。因為在消息傳遞那塊糾結了特別久，所以我會重點總結消息傳遞那塊。 這次做這個插件的功能很簡單，就是點擊按鈕后可以對當...
摘要：小結本文只是簡單分享了如何開發一個簡單的谷歌瀏覽器插件，以及一些注意事項，并且提到了如何授權和使用谷歌插件，重點介紹了插件開發必備的入口文件和插件中幾個重要環境以及環境之間的通信。 我們在上網的時候，都會用到瀏覽器，但是瀏覽器并非擁有我們想要的所有功能，我們可以根據自己的需要，實現自己的插件來滿足需求。比如網頁中經常會有大量的廣告，如果你希望擁有一個純凈的網頁，可以實現一個插件來刪除網...
閱讀 1297·2021-11-04 16:09
閱讀 3484·2021-10-19 11:45
閱讀 2396·2021-10-11 10:59
閱讀 1010·2021-09-23 11:21
閱讀 2762·2021-09-22 10:54
閱讀 1129·2019-08-30 15:53
閱讀 2600·2019-08-30 15:53
閱讀 3477·2019-08-30 12:57
