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

hnliang 8年前發布 | 69K 次閱讀插件 Chrome插件/擴展 Chrome

chrome 之所以越來越好用，很大一部分原因歸功于功能豐富的插件；對于chrome忠實用戶來說，了解和開發一款適合自己的chrome插件，確實是一件很cool的事情。

了解chrome 插件

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

推薦兩個網站了解和入門谷歌官方API：https://developer.chrome.com/extensions/getstarted

360的文檔：http://open.chrome.#/extension_dev/overview.html

開始寫第一個插件

文件結構

一個簡單的demo，文件目錄如下和普通的web文件沒有什么區別，簡單介紹下

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

寫一個manifest

api參考文檔 :http://open.chrome.#/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。
確認你的圖標尺寸盡量占滿19×19的像素空間。 Browser action 的圖標應該看起來比page action的圖標更大更重。
盡量使用alpha通道并且柔滑你的圖標邊緣，因為很多用戶使用themes，你的圖標應該在在各種背景下都表現不錯。不要不停的閃動你的圖標，這很惹人反感。

來自：靠譜崔小拽

本文由用戶 hnliang 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1460594346165.html

插件 Chrome插件/擴展 Chrome