开发属于自己的Chrome插件

什么是Chrome插件?

简单来说,Chrome浏览器插件就是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。

另外,其实Chrome插件不只是前端技术,Chrome插件还可以配合C++编写的dll动态链接库实现一些更底层的功能(NPAPI),比如全屏幕截图等,开发一个专属于服务自己的插件,为了更好的开发(滑水)。

下面来一点核心介绍:

manifest.json

这是一个Chrome插件最重要也是必不可少的文件,用来配置所有和插件相关的配置,必须放在根目录。

下面是一些简单的配置,完整配置可以参照这里。

{
            "manifest_version": 2,
            "name": "测试内容",
            "version": "1.0.0",
            "description": "测试内容描述",
            "author": "<[email protected]>",
            "content_scripts":[
                {
                    "matches": [""],
                    "js": ["js/jquery.js", "js/content-script.js"],
                    "run_at": "document_start"
                }
            ],
            "homepage_url": "https://www.jianshu.com/u/215a92cb71b8"
        }

background.js
可以理解成后台,是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

background的权限非常高,几乎可以调用所有的Chrome扩展API(除了devtools),而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS。

在上面的配置中,background可以通过page指定一张网页,也可以通过scripts直接指定一个JS,Chrome会自动为这个JS生成一个默认的网页:

配置:

// manifest.json

{
    "background":
    {
        "page": "background.html"
        "scripts": ["js/background.js"]
    },
}

popup.js

popup是点击browser_action或者page_action图标时打开的一个小窗口网页,焦点离开网页就立即关闭,一般用来做一些临时性的交互。

popup可以包含任意你想要的HTML内容,并且会自适应大小。可以通过default_popup字段来指定popup页面,也可以调用setPopup()方法。

配置:

// manifest.json
{
    "browser_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "Chrome插件实例",
        "default_popup": "popup.html"
    }
}

需要特别注意的是,由于单击图标打开popup,焦点离开又立即关闭,所以popup页面的生命周期一般很短,需要长时间运行的代码千万不要写在popup里面。

在权限上,它和background非常类似,它们之间最大的不同是生命周期的不同,popup中可以直接通过chrome.extension.getBackgroundPage()获取background的window对象。

右键菜单

Chrome插件可以自定义浏览器的右键菜单,主要是通过chrome.contextMenusAPI实现。

配置:

// manifest.json
{ "permissions": ["contextMenus"] }
// background.js
chrome.contextMenus.create({
    title: "右键菜单",
    onclick: function () { alert('您点击了右键菜单!'); }
});

omnibox配置

omnibox是向用户提供搜索建议的一种方式。

// manifest.json
{
    // 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
    "omnibox": { "keyword" : "test" },
}

好了,以上就是自己开发Chrome插件的大概流程,具体详细内容请参照这里

你可能感兴趣的:(开发属于自己的Chrome插件)