Getting Start chrome-extension demo

時間 2019-11-19

標籤 getting start chrome extension demo 欄目 Chrome 简体版

原文原文鏈接

寫一個小小的chrome擴展demo~javascript

準備工做

瞭解一下插件chrome-extension：
在應用商店裏的插件基本上都是以.crx爲文件後綴，該文件其實就是一個壓縮包，包括插件所須要的html、css、javascript、圖片資源等等文件。大致文件結構以下：css

manifest.json是整個插件的功能及文件配置清單，很是重要。
static目錄是放置整個插件的靜態資源文件的，包括css、js、圖片等等資源
template目錄是放置整個插件的功能頁面模板的。
_locales目錄是放置整個插件的國際化語言腳本的。

通常來講，清單文件manifest.json文件是必須的，且必須放在插件開發目錄的根目錄上。其餘的目錄均可以自定義。對於像我這樣的新手來講，我只要準備這幾個文件就好：html

清單文件（manifest.json）
HTML文件
JS文件
圖片文件

上手操做

首先編輯清單文件manifest.json：java

{ 
    "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.htmlpython

<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瀏覽器右上角的菜單->更多工具->擴展程序：

記得打開開發者模式：

而後咱們點擊加載已解壓的擴展程序，選擇咱們的文件夾：

導入成功，咱們能夠看到圖標顯示在右上角，點擊，出現文本：

成功！json

參考資料

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。