chrome插件開發簡介（一）——開發入門

時間 2019-11-30

原文原文鏈接

chrome做爲目前最流行的瀏覽器，備受前端推崇，緣由除了其對於前端標準的支持這一大核心緣由以外，還有就是其強大的擴展性。
基於其開發規範實現的插件現在已經很是龐大，在國內也是欣欣向榮，如天貓開發了大量的擴展，用於檢測頁面質量以及頁面性能，淘寶開發了許多的擴展以供運營工具的優化等等。其強大性不言而喻。javascript

這裏咱們來說一下其插件開發css

基礎概念

與chrome應用相似，chrome擴展主要是用於擴充chrome瀏覽器的功能。他體現爲一些文件的集合，包括前端文件（html/css/js）,配置文件manifest.json。
主要採用JavaScript語言進行編寫。html

個別擴展可能會用到DLL和so動態庫，不過出於安全以及職責分離的考慮，在後續的標準中，將會被捨棄，這裏再也不贅述前端
chrome擴展能作的事情：html5
- 基於瀏覽器自己窗口的交互界面
- 操做用戶頁面：操做用戶頁面裏的dom
- 管理瀏覽器：書籤，cookie，歷史，擴展和應用自己的管理，其中甚至修改chrome的一些默認頁面，地址欄關鍵字等，包括瀏覽器外觀主題都是能夠更改的
  
  這裏須要着重提一下，前端開發者喜歡的DevTools工具，在這裏也能進行自定義java
- 網絡通訊：http，socket，UDP/TCP等
- 跨域請求不受限制
- 常駐後臺運行
- 數據存儲：採用3種方式（localStorage，Web SQL DB，chrome提供的存儲API（文件系統））
- 擴展頁面間可進行通訊：提供runtime相關接口
- 其餘功能：下載，代理，系統信息，媒體庫，硬件相關（如usb設備操做，串口通訊等），國際化
chrome擴展的限制：web
- 環境限制：基本上功能性操做都須要經過chrome提供的API來完成，這跟實際的頁面js又有一些差別，看上去並無那麼的徹底自由。chrome
  
  如chrome擴展的頁面腳本，能夠獲取並操做頁面dom，可是，出於安全性的考慮，頁面腳本的域是獨立區分開來的，即js成員變量不共享。json
  
  即：插入到用戶頁面的js腳本可執行，可是與原始腳本不一樣執行域，互相不會影響。跨域
  
  content_script不能使用除了chrome.extension以外的chrome.*的接口,不能訪問它所在擴展中定義的函數和變量,不能訪問web頁面或其它content script中定義的函數和變量,不能作cross-site XMLHttpRequests
- chrome擴展，其功能受限於chrome的API，好比說文件系統，必須經過chrome的fileSystem接口，而這些接口僅僅只是對html5已有的文件系統接口的擴展，它容許Chrome應用讀寫硬盤中用戶選擇的任意位置，而HTML5自己提供的文件系統接口則只能在沙箱中讀寫文件，並不能獲取用戶磁盤中真正的目錄。

舉個栗子

下面以一個簡單的例子來簡述一下咱們開發擴展過程當中會遇到哪些問題

這個栗子主要用於去自定義用戶頁面的樣式（好比此處爲改滾動條樣式），插入一個自定義的腳本到用戶頁面中執行（此處爲輸出一些簡單信息）

【1】編輯擴展程序所須要的主要文件夾

文件結構說明

./
 ├─ manifest.json //擴展的配置項
 ├─ Custom.js     //自定義js腳本
 ├─ Custom.css    //自定義css樣式
 ├─ icon.png      //擴展程序的icon
 └─ popup.html    //擴展的展現彈窗複製代碼

自定義js腳本：瀏覽器中執行，但並不是真正意義上的「插入」，與原來頁面的js域隔離開

例如，custom.js中的window跟頁面js中的window不是同一個對象，變量也沒法共享。
```
console.log('執行init');
  console.log(document.title);
  console.log(document.getElementById("abc"));
  // 實例函數，能夠供popup.html中調用
  function helloWorld(name){
      console.log(`${name} say 'hello world!'`);
      alert(`${name} say 'hello world!'`);
  }
  //...複製代碼
```
這樣的腳本路徑將以 chrome://extensions/擴展的id串碼/path/to/you/js/xxx.js出如今控制檯調試時候。

自定義樣式：一樣，css也不是真正的插入到頁面的document中，而是瀏覽器的樣式生效策略中會加入這些樣式規則

/* 重置滾動條 */
::-webkit-scrollbar {width:4px!important;height:7px;}
::-webkit-scrollbar-button {display:none;}
::-webkit-scrollbar-thumb {border-radius:3px;background: #45A5DB;}
::-webkit-scrollbar-track {width:4px;height:7px;background:transparent;}
::-webkit-scrollbar-track-piece {background:transparent;}

/* ... */複製代碼

小窗口popup.html：這裏面是一個按鈕，點擊後去調用custom.js裏面的helloWorld函數

<!doctype html>
<html>
  <head>
    <title>hello world</title>
  </head>
  <body>
    <h2>hello world</h2>
    <p><button onclick="dealClick('王小明')">按鈕</button></p>
    <script> function dealClick(name){ //這裏值得注意，大部分功能性操做，好比執行腳本，執行函數，都是不能夠直接執行，而須要經過chrome.*這樣方式進行 chrome.tabs.executeScript( null, { code: `helloWorld('${name}')` // 這裏調用的是上面的custom.js重定義好的function } ); } </script>
  </body>
</html>複製代碼

核心配置文件manifest.json：

{
  "name": "擴展名稱",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "擴展描述",
  "icons" : {           // 擴展的icon
    "16" : "icon.png",
    "48" : "icon.png",
    "128" : "icon.png"
  },
  "browser_action": {   // browser_action表示程序圖標會出如今地址欄右側，若要出如今地址欄，則寫成page_action
    "default_title": "日報工具",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [  //content_scripts是在Web頁面內運行的javascript腳本。
                        //經過使用標準的DOM，它們能夠獲取瀏覽器所訪問頁面的詳細信息，並能夠修改這些信息。
    {                   //這裏的值是數組，能夠針對多個站點進行不一樣的操做配置
      "matches": [
        "http://www.google.com/*"
      ],
      "css": [
        "custom.css"
      ],
      "js": [
        "custom.js"
      ],
      "all_frames": true,
      "run_at": "document_idle"
    }
  ],
  "permissions": [   //一些權限的配置，
    "cookies",       //好比cookie權限，好比系統通知權限，相似於notify這樣的東西，在window系統上未右下角的小氣泡
    "notifications"
  ]
}複製代碼