一個簡單的chrome拓展程序開發

時間 2019-12-06

原文原文鏈接

最近忽然以爲有些經常使用的功能能夠寫成瀏覽器插件，就不用把代碼放到console控制檯運行了。只要點擊插件圖標就能夠自動運行。會方便不少。就去查了下chrome插件開發教程。本質上講，chrome插件就是以一些特殊的方式運行一些特定的html,css,JavaScript代碼，前端同窗們學起來仍是很容易的。javascript

比較好的中文的參考資料：
1.360翻譯的文檔：http://open.chrome.360.cn/ext...
2.Chrome擴展及應用開發：http://www.ituring.com.cn/min...css

咱們作一個簡單的插件：實現點擊插件圖標能夠給頁面上全部的a標籤加上一個target="_blank"，讓點全部連接都在新頁面打開。
咱們開發的應用這樣使用：
html

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節點。
代碼：java

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    這是popup.html裏面。
</body>
</html>
<script src="popup.js"></script>

這裏只用來加載一個js。git

4.popup.js。　popup.html引入的js。這裏咱們用戶它的作的事是向content_scripts中發送一個消息。至關於發一個命令。告訴content script，去辦事吧。content_scripts的內容在後面，看完再回過來看一次這裏。github

chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
            // console.log(response.farewell);
        });
    });

chrome.tabs.getSelected()這個函數能獲取到當前標籤的信息對象並傳遞給回調函數。　
獲取到tabId就是tab.id。能夠本身console.log(tab)出來看一下。文章後面有對應調試控制檯的打開方式。tab相關的接口能夠查看：http://open.chrome.360.cn/ext...　不少接口都要用到這個參數：tabId ( integer )，其實就是用這個接口拿到tabId。 chrome

chrome.tabs.sendRequest()這個函數是向某個標籤的content_script中發送一個消息。也須要tabId這個參數。chrome插件之間的通訊接口可查看：http://open.chrome.360.cn/ext...json

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...