chrome插件开发

阅读更多

最近看了下Chrome插件的开发
新建一个目录作为插件的要目录,在目录下新建 manifest.json文件

{
    "name": "我的插件",
    "version": "0.1",
    "manifest_version": 2,
    "description": "看看我的插件",
    "icons": {
        "16": "statics/img/16.png",
        "48": "statics/img/48.png",
        "128": "statics/img/128.png"
    },
    "browser_action": {
        "default_icon": "statics/img/16.png",
        "default_title": "我的插件",
        "default_popup": "template/pop.html"
    },
    "permissions": [
        "tabs", "http://*/"
    ],
    "homepage_url": "http://leeqq.iteye.com"
}

 
 "browser_action" -> "default_popup" 指向 插件的弹窗页面,如
chrome插件开发_第1张图片
 
在 template/pop.html中引入 ../statics/js/pop.js

绑定  事件
    

    var get = document.getElementById('get');
    get.addEventListener('click', function () {
        chrome.tabs.insertCSS({file:'statics/css/insert.css'});
    })
    
    var update = document.getElementById('update');
    update.addEventListener('click', function () {
        chrome.tabs.executeScript({file: 'statics/js/insert.js'}, function () {
        });
    });
    
    var create = document.getElementById('create');
    create.addEventListener('click', function () {
        chrome.tabs.create({
            index: 3,
            url: 'template/newpage.html',
            selected: false
        }, function (tab) {
            console.log(tab);
        })
    });

 
分别是往当前页面注入css,js和打开新的tab

 

在Extension页面点击 Load unpacked extensions,选择要目录安装插件

chrome插件开发_第2张图片
 
这里的api不多做介绍,可以参照网上的api,这里附上360的平台地址
http://open.chrome.360.cn/extension_dev/overview.html
或者访问chrome官网
https://developer.chrome.com/extensions

附件里附上个小例子 myPlugin

  • chrome插件开发_第3张图片
  • 大小: 10.4 KB
  • myPlugin.rar (7.6 KB)
  • 下载次数: 0
  • chrome插件开发_第4张图片
  • 大小: 23.4 KB
  • 查看图片附件

你可能感兴趣的:(chrome,插件)