chrome插件編寫基本入門

http://igeekbar.com/igeekbar/post/331.htm

#精選 JAVASCRIPT CHROME

作為一名程序猿，怎么能不會寫chrome插件呢[笑]
所以今天就教教大家怎么寫最基本的chrome插件，不對，確切地說是互相學習一起學習。
（我是不會告訴你說我也是剛學會沒多久的！）

基礎知識：

首先，我們要知道一個 chrome插件需要哪些文件
其實很簡單

配置（入口）文件 manifest.json
xx.html
xx.css
xx.js
圖片

這就OK了，如果再看這篇文章的你是一位前端攻城獅、程序猿，那么恭喜你，你的學習難度會很小分分鐘的事情，很容易就能學會（當然我指的是基礎，最基本的寫法）

由于 html、css、js 及文件組織，跟普通的 web 開發一樣，那寫 Chrome 擴展主要就是 manifest 文件的編寫和擴展的調試了

manifest.json

基本屬性

包括擴展的名稱（name）、版本（version）、描述（description）、圖標位置（icons）和 manifest 版本（manifestversion）等信息。
name、version 和 manifestversion 是必須的，而且 manifest_version 必須為 2

（別問我為啥是2，我也不知道）

舉個栗子：
```
{
//這是必須的
"name": "coding冒泡點贊狂魔",
"manifest_version": 2, 
"version": "1.0",
//這是可選的
"description": "coding點贊腳本"
}
```
Markup
browser_action

browseraction指定擴展的圖標放在Chrome工具欄中，它定義了擴展圖標文件位置（defaulticon）、懸浮提示（defaulttitle）和點擊擴展圖標所顯示的頁面位置（defaultpopup）
用 browser actions 可以在chrome主工具條的地址欄右側增加一個圖標。作為這個圖標的延展，一個browser action圖標還可以有tooltip、badge和popup。
如果你想創建一個不總是可見的圖標, 可以使用page action來代替browser action.

舉個栗子
```
{
 ...
 "browser_action": {
     "default_icon": "1.png",
     "default_title": "我是點贊狂魔",
     "default_popup": "popup.html"
 },
 ...
```
Markup

}
permissions
這個牛逼了，比較重要的

permissions 屬性是一個數組，它定義了擴展需要向 Chrome 申請的權限，比如通過 XMLHttpRequest 跨域請求數據、訪問瀏覽器選項卡（tabs）、獲取當前活動選項卡（activeTab）、瀏覽器通知（notifications）、存儲（storage）等，可以根據需要添加。
擴展或app將使用的一組權限。每個權限是一列已知字符串列表中的一個，如geolocatioin或者一個匹配模式，來指定可以訪問的一個或者多個主機。權限可以幫助限定危險，如果你的擴展或者app被攻擊。一些權限在安裝之前，會告知用戶
如果一個擴展api需要你的聲明一個權限在manifest文件，一般的，api的文檔將告訴怎么做。例如，Tabs頁面告訴你這么聲明一個tabs權限。
這是一個擴展的manifest文件的權限設置的一部分。

舉個栗子
```
{
    ...
    "permissions": [
        "tabs",
        "bookmarks",
        "http://www.blogger.com/",
        "http://*.google.com/", 
        "unlimitedStorage",
        ...
     ], 
     ...
}
```
Markup
background

擴展常常用一個單獨的長時間運行的腳本來管理一些任務或者狀態。
background 可以使擴展常駐后臺，比較常用的是指定子屬性 scripts，表示在擴展啟動時自動創建一個包含所有指定腳本的頁面。

舉個栗子
{ ... "background": { "scripts": ["myscript.js"] }, ... }
content_scripts

Content scripts是在Web頁面內運行的javascript腳本。通過使用標準的DOM，它們可以獲取瀏覽器所訪問頁面的詳細信息，并可以修改這些信息。

舉個栗子
{ ... "content_scripts": [ { "matches": ["https://coding.net/*"], // 這是必須項 "js": ["jquery.min.js"], // 這是可選 "css": ["xx.css"]， // 這是可選 ... } ] ... }

使用 contentscripts 字段，一個擴展可以向一個頁面注入多個contentscript腳本；每個content script腳本可以包括多個javascript腳本和css文件。

簡單的說content_scripts會根據你在它內部定義的 matches規則去匹配url，然后在匹配成功的url頁面中注入你指定的js和css等

好了，學會這些之后，你就能做一個簡單的 chrome插件了，有一點要注意content scripts是打開頁面后直接注入你可以不需要background和permissions，而如果你想點擊你的插件圖標再執行注入的話你就必須使用background和permissions 將代碼注入頁面，擴展必須具有cross-origin 權限，還必須可以使用chrome.tabs模塊。可以通過在manifest文件的permissions字段里聲明來取得這些權限。一旦設置好了權限，就可以通過調用executeScript()來注入javascript腳本。如果要注入css，可以調用insertCSS()。
舉個栗子
chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{code:"document.body.bgColor='red'"}); });

這樣你就可以點擊圖標之后把對應網頁的背景色變成紅色
然而，有時候我們的代碼可能會比較多，直接寫在executeScript()中不美觀，那么我們就可以新建一個文件
舉個栗子
/* action.js */ document.body.bgColor='red'; alert('已改變背景色');

/* main.js */ chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{file:"action.js"}); });

總結

最后我們來總結一下上面所學習的部分，把所有代碼整合到一起，就拿我的一個簡單的基本插件為例：
目錄結構：

---- 插件文件夾
-------- manifest.json
-------- jquery.min.js
-------- like.js
-------- myscript.js

manifest.js

{ "name": "coding冒泡點贊狂魔", "manifest_version": 2, "version": "1.0", "description": "coding點贊腳本", "browser_action": { "default_icon": "1.png" "default_title": "我是點贊狂魔" }, "permissions": [ "tabs", "https://coding.net/*" ], "background": { "scripts": ["myscript.js"] }, "content_scripts": [ { "matches": ["https://coding.net/*"], "js": ["jquery.min.js"] } ] }
myscript.js

chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{file:"like.js"}); });
like.js

jQuery('.heart.icon.empty').click(); console.log('已點贊'); console.log(jQuery('.heart.icon.empty').click()); alert('已點贊 '+ jQuery('.heart.icon.empty').click().length + '條');

參考鏈接

360極速瀏覽器應用開放平臺（這個的文檔略微有點老）
谷歌的官方文檔（你的英語要夠好）
電子版：《Chrome擴展及應用開發》
更多請參考原文

posted @ 2017-08-16 14:48 igeekbar 閱讀(2569) 評論(0) 收藏舉報

刷新頁面返回頂部

chrome插件編寫基本入門