Getting Start chrome-extension demo
阿新 • • 發佈：2018-05-21
模式 text 比較 www school ria 基本上 9.png 把手
寫一個小小的chrome擴展demo~
準備工作
了解一下插件chrome-extension：
在應用商店裏的插件基本上都是以.crx為文件後綴，該文件其實就是一個壓縮包，包括插件所需要的html、css、javascript、圖片資源等等文件。大體文件結構如下：
- manifest.json是整個插件的功能及文件配置清單，非常重要。
- static目錄是放置整個插件的靜態資源文件的，包括css、js、圖片等等資源
- template目錄是放置整個插件的功能頁面模板的。
- _locales目錄是放置整個插件的國際化語言腳本的。
一般來說，清單文件manifest.json文件是必須的，且必須放在插件開發目錄的根目錄上。其他的目錄都可以自定義。對於像我這樣的新手來說，我只要準備這幾個文件就好：
- 清單文件（manifest.json）
- HTML文件
- JS文件
- 圖片文件
上手操作
首先編輯清單文件manifest.json：
{ "manifest_version": 2, //固定的 "name": "Hello Md_cow", //插件名稱 "version": "1.0", //插件使用的版本 "description": "Md_cow tell you today is 520.", //插件的描述 "browser_action": { //插件加載後生成圖標 "default_icon": "cow.png",//圖標的圖片 "default_title": "水牛有話說", //鼠標移到圖標顯示的文字 "default_popup": "hello.html" //單擊圖標執行的文件 }
然後是hello.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> body { width: 150px; //設置一下窗口寬度，不然會很窄 } </style> </head> <body> <h2>原諒宸：</h2> <div> <p>今天是520！</p> <p>怎麽沒有學妹和我表白？</p> <p>不開心！！！</p> </div> </body> </html>
cow.png圖標:
我們目前用到的文件就是這些（比較簡陋），把它們統一放到一個文件夾下：
然後，我們找到chrome瀏覽器右上角的菜單->更多工具->擴展程序：
記得打開開發者模式：
然後我們點擊加載已解壓的擴展程序，選擇我們的文件夾：
導入成功，我們可以看到圖標顯示在右上角，點擊，出現文本：
成功！
參考資料
- chrome擴展開發簡單示例
- 谷歌(Chrome)瀏覽器插件開發教程
- Chrome 擴展開發——編寫一個自己的瀏覽器插件
- Getting Started Tutorial
- Chrome插件開發簡要指南
- 手把手教你開發chrome擴展
- 【幹貨】Chrome插件(擴展)開發全攻略
Getting Start chrome-extension demo