【chrome 插件一】開發一個簡單chrome瀏覽器插件

時間 2019-11-07

標籤 chrome 插件一開發一個簡單 chrome 瀏覽器插件欄目 Chrome 简体版

原文原文鏈接

chrome 之因此愈來愈好用，很大一部分緣由歸功於功能豐富的插件；對於chrome忠實用戶來講，瞭解和開發一款適合本身的chrome插件，確實是一件很cool的事情。css

瞭解chrome 插件

chrome 插件我的理解：就是一個html + js +css + image的一個web應用；不一樣於普通的web應用，chrome插件除了兼容普通的js，json，h5等api，還能夠調用一些瀏覽器級別的api，例如收藏夾，歷史記錄等。html

推薦兩個網站了解和入門
谷歌官方API：https://developer.chrome.com/extensions/getstarted
360的文檔：http://open.chrome.360.cn/extension_dev/overview.htmlweb

開始寫第一個插件

文件結構

一個簡單的demo，文件目錄以下

和普通的web文件沒有什麼區別，簡單介紹下chrome

html:存放html頁面json
js :存放jsapi
locales ：存放了一個多語言的兼容【可無】瀏覽器
image ：放了兩張圖片【初期圖標】post
manifest ：核心入口文件優化

寫一個manifest

api參考文檔 :http://open.chrome.360.cn/extension_dev/manifest.html網站

直接上代碼：

{
  "name": "hijack analyse plug",
  "version": "0.0.1",
  "manifest_version": 2,

  // 簡單描述
  "description": "chrome plug analyse and guard the http hijack",
  "icons": {
    "16": "image/icon16.png",
    "48": "image/icon48.png"
  },
  // 選擇默認語言
  "default_locale": "en",

  // 瀏覽器小圖表部分
  "browser_action": {
    "default_title": "反劫持",
    "default_icon": "image/icon16.png",
    "default_popup": "html/test.html"
  },

  // 引入一個腳本
  "content_scripts": [
    {
      "js": ["script/test.js"],
      // 在什麼狀況下使用該腳本
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      // 什麼狀況下運行【文檔加載開始】
      "run_at": "document_start"
    }
  ],
  // 應用協議頁面
  "permissions": [
    "http://*/*",
    "https://*/*"
  ]
}

test.js 文件

/**
 * @author: cuixiaohuan
 * Date: 16/4/13
 * Time: 下午8:41
 */
(function(){
    /**
     * just test for run by self
     */
    console.log('begin');
})();

test.html 文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>just for test</title>
</head>
<body>
<h3>test</h3>
</body>
</html>

運行插件

chrome 中輸入：chrome://extensions
選擇加載已解壓的插件-》選擇文件根目錄便可。
效果以下：

一個基本的插件變完成了，勾選已啓用，隨便打開一個網頁，會看到log中輸出以下

點擊頁面上面的小圖標以下圖：

優化建議

一個小的插件已經完成，可是還有更多的api和有趣的事情能夠去作。下面是360文檔中給出一些優化建議，共勉。

確認 Browser actions 只使用在大多數網站都有功能需求的場景下。確認 Browser actions 沒有使用在少數網頁纔有功能的場景，此場景請使用page actions。
確認你的圖標尺寸儘可能佔滿19x19的像素空間。 Browser action 的圖標應該看起來比page action的圖標更大更重。
儘可能使用alpha通道而且柔滑你的圖標邊緣，由於不少用戶使用themes，你的圖標應該在在各類背景下都表現不錯。不要不停的閃動你的圖標，這很惹人反感。

【轉載請註明：【chrome 插件一】開發一個簡單chrome瀏覽器插件 | 靠譜崔小拽】