上手chrome插件開發

上手chrome插件開發

比想象中要簡單

項目基本目錄

// 簡單的demo目錄

├── icon.png
├── manifest.json
├── popup.html
└── popup.js複製代碼

上手調試

打開chrome://extensions/ 開啓開發者模式，

選擇加載已解壓的擴展程序

選中本身的項目文件便可上手調試

項目下文件解析

manifest.json 配置文件

{
 // 必須
 "manifest_version": 2,
  "name": "個人擴展程序",
  "version": "版本字符串",
  
  // 可選：瀏覽器按鈕能夠包含圖標、工具提示、徽章和彈出內容。
   "browser_action": { 
    "default_title": "get cookie In chrome", // 鼠標移動到插件icon會tips
    "default_popup": "popup.html", // 點擊以後popup出來的部分
    "default_icon": "icon.png", // 插件的icon
    
    // page_action 配置的是指瀏覽器地址欄中的一些交互，較少人這麼用
    
    
    "background": { // 後臺運行程勳/腳本配置
        "scripts": ["eventPage.js"], // 腳本，
         "page": "background.html", // 也能夠是html
        "persistent": false // 是否長期運做
      },
      
     "permissions": [ // 權限配置，表示在js執行過程能使用的權限
          "tabs", // 擁有使用chrome tab的權限
          "bookmarks", // 可使用書籤的權限
          
          "http://www.blogger.com/", // 設置站點權限
          "http://*.google.com/", 
          "unlimitedStorage" // 不限制存儲
          ...// 詳細配置請看下面
        ],
    ....
  },
 }
 
 複製代碼

上面提到部分的詳細說明文檔：

permissions 權限清單

通信

1.chrome.runtime.sendMessage 適合

content.js => background.js 通信
content.js => popup.js 通信
background.js => popup.js 通信
複製代碼

2.chrome.tabs.sendMessage適合

background.js => content.js

popup.js => content.js
複製代碼

3.接受信息用chrome.runtime.onMessage.addListener

4.popup頁面能夠經過chrome.extension.getBackgroundPage() 方式調用background的函數

一些小坑

1.引入vue 會出現 安全性問題，須要在manifest.json中設置

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
複製代碼

2.若是須要在background中使用jquery, 須要提早將jquery在background.js以前引入 ，如 ：

"background": {
    "scripts": [jquery-3.4.1.min.js", "background.js"],
    "persistent": true
  },
  複製代碼

3.每一個運行環境都有本身的devTools，好比popup界面須要調出開發者工具須要對着插件的icon點擊右鍵，而後點擊審查彈出內容，須要調出background須要在chrome://extensions/ 找到插件，若是background.js配置成功的話 會有一個背景頁的連接，點擊就會調出開發者工具

4.官方說在background寫定時任務須要使用到alarm 可是實際上settimeout和setintervel也是能夠的（另外若是防止chrome殺掉後臺程序，須要設置manifest.json中的persistent = true）

5.在background 程序中能夠發器ajax請求，可是須要api所在服務器支持跨域設置

6.html中的inline javascript 不會被執行

個人小應用(chrome中獲取指定網站的cookie)

https://github.com/spademan/get-cookie-in-chrome

但願能給個小星星

參考文檔

spademan