尝试开发Chrome浏览器插件（Chrome扩展程序）_谷歌插件开发

chrome浏览器插件实际就是chrome浏览器的扩展程序，各式各样的扩展程序可以解决很多问题，开发者都不陌生。
插件程序都是crx文件，其实应该就是Chrome Extension的缩写。Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。
chrome浏览器的扩展程序除了在chrome浏览器可以运行，还可以运行在所有webkit内核的国产浏览器，比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等；
以下为了方便，直接叫浏览器插件。

在写浏览器插件之前，一直以为是一件很难的事，其实最后完成了会发现，真的是一件非常简单的事，而且就和钓到鱼一样有意思，虽然可能是一条小破鱼哈哈哈
非官方chrome API：Chrome 平台 API - Google Chrome 扩展程序开发文档（非官方中文版）

官方：

 https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=zh-cn

里面也有一些demo可以直接尝试~

在Chrome浏览器查看扩展程序：

1.你可以直接输入： chrome://extensions   直接打开浏览器插件

2.在你的Chrome浏览器最右上角有三个点，点击三个点

2.1：三个点 ——扩展程序——管理扩展程序

2.2 三个点——设置——扩展程序
 

进到扩展程序把最左上角的开发者模式打开：

 

1.创建浏览器插件文件，最重要的就是manifest.json文件

manifest.json：配置所有和插件相关的配置，作为chrome入口文件，必须放在根目录
html：html页面
images：插件图标
scripts：js文件
css: 样式
_locales: 多语言文件

 

2.manifest.json 最主要的配置：
 

 
{
    // 版本，建议写2，1 是旧的，已弃用，不建议
    "manifest_version": 2,
    "name": "peachSoda-plugin", // 插件名称
    "version": "1.0.0", // 插件版本
    // 描述
    "description": "尝试写一个插件",
    "icons":
    {
        "16": "images/icon_electrocardio.png",
        "48": "images/icon_electrocardio.png",
        "128": "images/icon_electrocardio.png"
    },
    //browser_action和page_action只能添加一个
    "browser_action":
    { //浏览器级别行为，所有页面均生效
        "default_icon": "images/icon_electrocardio.png", //图标的图片
        "default_title": "peach写个插件玩玩", //鼠标移到图标显示的文字
        "default_popup": "html/popup.html" //单击图标后弹窗页面
    },
    // "page_action":
    // { //页面级别的行为，只在特定页面下生效
    //     "default_icon":
    //     {
    //         "24": "images/icon_electrocardio.png",
    //         "38": "images/icon_electrocardio.png"
    //     },
    //     "default_popup": "html/popup.html",
    //     "default_title": "什么插件"
    // },
 
    // 可选
    "author": "PeachSoda",
    "automation": "7777777",
    // 背景页的脚本路径,一般为插件目录的相对地址
    "background":
    {
        "scripts": [
            "scripts/background.js"
            // "scripts/devtools-page.js"
        ]
    },
    "devtools_page": "html/devtools-page.html",
 
    // 内容脚本一般植入会被植入到页面中, 并且可以控制页面中的dom.
    "content_scripts": [
        {
            // "js": ["js/else-insert.js"],
            "css": ["styles/main.css"],
            "matches": ["<all_urls>"]// 被植入到页面，只在这些站点下 content_scripts会运行
        }
    ],
    // 数组，声明插件所需要的权限
    "permissions": [
        "cookies", // 使用cookies
        "webRequest", //使用web请求
        "http://*", //可以通过executeScript或者insertCSS访问的网站地址。如： https://*.google.com/
        "management", //
        "storage", //使用本地存储
        "tabs", //操作标签
        "contextMenus" //右键菜单
    ]
}

这个是最主要的配置，包括右键菜单啦，点击文案啦，弹窗现实啦等等更多的配置可以查看
manifest.json详细配置文档： 清单文件--扩展开发文档

3.浏览器插件创建好之后，需要打包扩展程序

回到Chrome浏览器查看扩展程序方法，进入到扩展程序页面，最左上角有个 打包扩展程序 按钮，点击，弹出选择文件弹窗，选择你的文件夹，如果有报错，会弹窗提示，根据你提示修改之后，重新选择你修改好的文件，再次打包，打包好之后最后会有一个提示，是扩展程序打包好之后的存放路径，记得先截图避免找不到。


 

4.加载已解压的扩展程序
打包好之后的浏览器插件，会生成crx的文件，点击最左上角的 加载已解压的扩展程序 根据打包好之后的路径截图，找到已解压的文件，就可以添加你自己写好的扩展程序啦~

这里有个小提示：解压好的crx的文件也可以直接拖拽到扩展程序页面，但是直接拖拽的话呢，会有这种后果
 

 

一直提示没有发布到chrome应用商店并且无法开启和调试，当然如果你要发布的话也可以，先要注册chrome的开发者账号，需要支付5美元即可，然后就可以发布
 

所以建议大家还是点击按钮解压才可以开启并且调试~
 

到这一步结束就已经可以有一个基础的浏览器插件啦