chrome插件开发步骤

chrome插件有什么用

chrome插件可以做很多事情，比如说大家经常用的二维码生成器，禁广告的，它类似于用户的操作，但是又不需要用户操作。

开始开发

不需要任何设备，只需要一个编辑器，一个chrome浏览器。

先讲一下插件的目录结构

最重要的一个文件：manifest.json

整个文件夹的精髓所在，可以说是插件的入口。

manifest内容

{
    "name": "todo-plugin", //  名称
    "version": "0.9.0", // 版本号
    "manifest_version": 2, // 一定需要，如果没有，会报错
    "description": "chrome plugin demo", // 描述
    "content_scripts": [ // 见详情【1.1】
        {
            "matches": ["*://*/*"],
            "js": ["jquery.js","index.js"]
        }
    ],
    "background":{ // 见详情【1.2】
        "scripts":["jquery.js","background.js"]
    },
    "permissions": [ 
        "http://tcservice.17usoft.com/"
    ]
        
}
           

【1.1】content_scripts 详细说明

Content Scripts是运行在Web页面的上下文的JavaScript文件。通过标准的DOM，Content Scripts可以操作（读取并修改）浏览器当前访问的Web页面的内容。

使用限制：

1.不能访问如下chrome.* API

chrome.extension API

chrome.i18n API

chrome.runtime API

chrome.storage API

2.不能访问Chrome扩展页面中定义的JavaScript变量和函数

3.不能访问Web页面或其他Content Scripts中定义的JavaScript变量和函数

属性说明：

名称	类型	可选/必选	说明
matches	string数组	必选	Content Script注入的Web页面
exclude_matches	string数组	可选	Content Script不注入的Web页面
include_globs	string数组	可选	对于matches匹配的Web页面，进一步限定URL
exclude_globs	string数组	可选	对于matches匹配的Web页面，进一步排除URL
match_about_blank	boolean	可选	是否注入Content Script到about:blank和about:srcdoc页面，默认false
css	string数组	可选	注入到匹配的Web页面中的CSS文件，顺序相关
js	string数组	可选	注入到匹配的Web页面中的JS文件，顺序相关
run_at	string	可选	控制JS文件注入的时机，如"document_start", “document_end”, “document_idle”。默认"document_idle","document_start"表示在CSS文件之后，DOM构建或其他脚本运行之前，注入JS文件。“document_end”,表示在DOM构建结束之后，图片或框架加载之前，注入JS文件。"document_idle"表示在"document_end"与触发window.onload事件之间的某个时间，注入JS文件，具体时间可以根据页面的内容和加载的进度优化。
all_frames	boolean	可选	控制JS文件是否在匹配的Web页面中的所有框架中运行。默认false表示只在顶层框架中运行

如上述的配置：matches表示所有web页面均注入

js表示先加在jq，再加载index.js

【1.2】background配置相关

扩展常常用一个单独的长时间运行的脚本来管理一些任务或者状态。

背景页是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，同时，在同一时间只有一个实例处于活动状态。

在一个有背景页的典型扩展中，用户界面（比如，浏览器行为或者页面行为和任何选项页）是由沉默视图实现的。当视图需要一些状态，它从背景页获取该状态。当背景页发现了状态改变，它会通知视图进行更新。

实例

通过background.js跨域请求接口

content script js中代码

chrome.runtime.sendMessage({
        type:'fetch',
        url:'https://flights.ctrip.com/itinerary/api/12808/products',// ctrip机票接口
        para:para
    }, function(response) {
        console.log('收到来自后台的回复：' + response);
    });
           

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
    console.log('收到来自content-script的消息：');
    console.log(request, sender, sendResponse);
    if (request.type == 'fetch') {
        var param = request.para
        param = JSON.stringify(param)
        $.ajax({
            url:"https://flights.ctrip.com/itinerary/api/12808/products",    //请求的url地址
            dataType:"json",   //返回格式为json
            contentType:"application/json;charset=utf-8",
            async:true, //请求是否异步，默认为异步，这也是ajax重要特性
            data:param,    //参数值
            type:"POST",   //请求方式
            beforeSend:function(){
                //请求前的处理
            },
            success:function(req){
                //请求成功时处理
                console.log(req)
                sendResponse(JSON.stringify(req));
            },
            complete:function(){
                //请求完成的处理
            },
            error:function(){
                //请求出错处理
            }
        });
    }
    return true;
});

           

如果有打印结果，说明成功

否则，就慢慢解决坑吧。