Chrome扩展开发入门体验

****前言**** Chrome浏览器扩展开发算是相当简单的,基本只要掌握HTML+CSS+Javascript,即可快速开发一个属于你的Chrome插件!


****Chrome扩展基本目录结构****

manifest.json  这是一个配置文件,里面记录了扩展的使用范围、作者、版本、其余需要加载的文件等内容;
icon.png       这个一看便知,就是扩展的图标~~~
popup.html     点击扩展图标,弹出的面板页面(如果在manifest.json中配置了default_popup为该文件的话)
popup.js       popup面板加载的js脚本文件
popup.css      popup面板加载的css样式文件  
  • 具体分析manifest.json插件的配置文件
{  
    "name": "Alic",  //插件的名称
    "version": "0.1.0", //扩展的版本
    "manifest_version":2, //这个是必须的,并且值为2
    "description": "Chrome扩展demo",  //扩展的基本描述
    "browser_action": {  
        "default_icon": "icon.png" , //插件图标icon位置
        "default_title": "默认标题", //鼠标hover是的标题
        "default_popup": "popup.html" //单击图标popup出来的面板
    },
    "permissions":[
        "http://www.samego.com"
    ]
} 

其它属性的详细说明 permissions permissions 属性是一个数组,它定义了扩展需要向 Chrome 申请的权限,比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡(tabs)、获取当前活动选项卡(activeTab)、浏览器通知(notifications)、存储(storage)等,可以根据需要添加。

{
    "permissions": [
        "http://api.example.com/api/"
        "tabs",
        "activeTab",
        "notifications",
        "storage"
    ]
}

background background 可以使扩展常驻后台,比较常用的是指定子属性 scripts,表示在扩展启动时自动创建一个包含所有指定脚本的页面。

{
    "background": {
        "scripts": ["./public/js/background.js"]
    }
}

chrome_url_overrides chrome_url_overrides 属性可以自定义的页面替换 Chrome 相应默认的页面,比如新标签页(newtab)、书签页面(bookmarks)和历史记录(history)。

{
    "chrome_url_overrides": {
        "newtab": "tab.html"
    }
}

****Chrome扩展调试**** menu->设置->扩展程序 注意:将开发者模式选中~~~ The first = 点击加载已解压的扩展程序,并选择扩展程序的目录 完成后会在项目的根目录生成xx.crx以及xx.pem两个文件 The second = 查看浏览器的工具栏

我的插件dir-tree

Alic_dir

ALic_Chrome

Alic_Chrome

简单的扩展插件就完成了 ~~~


****background交互**** 简单来说呢,上面完成的其实就是一个扩展程序的微框架。 background顾名思义呢就是扩展程序的后台脚本,该脚本在程序运行之后一直处于后台运行状态。记录常用的API。

在background里绑定browserAction的点击事件定义事件响应处理

chrome.browserAction.onClicked.addListener(function(){  
     //to-do
});

调用chrome.tabs.create()来创建新的tab,url既可以是path也可以是网址

chrome.tabs.create({url: "./home/index.html"});

content script调用background方法 在background脚本定义方法

// 创建新标签页的自定义方法
function testDynamic(){
    chrome.tabs.create({url: "./home/index.html"});
}

在content script使用content script里定义的方法

var bg = chrome.extension.getBackgroundPage();   
bg.testDynamic();

content script与background交互 content script监听消息:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {});  

background发送消息:

chrome.tabs.sendRequest(tab.id, data, function(data) {});  

相反~~~

background监听消息:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {});  

content script侧发送消息:

chrome.extension.sendRequest(data, function(data) {}); 

开发一个简单Chrome扩展程序基本是没有什么大问题的!我的体会呢,要是主要用于离线的呢,还是开发应用好点,扩展程序也不是不可以,否则数据存储方面就使用js处理即可!


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的博客

ZendFrameWork组件Layout学习笔记

试图助手可以理解成为控制页面布局,按照这个顺序进行页面的渲染 $this->headLink() 只是生成link标记占位符,例如 <?php echo $t...

3487
来自专栏Jerry的SAP技术分享

微信程序开发系列教程(四)使用微信API创建公众号自定义菜单

大家可能经常看到一些微信公众号具有功能强大的自定义菜单,点击之后可以访问很多有用的功能。

641
来自专栏猿天地

hbuilder 开发APP填坑经验

hbuilder中进行窗口管理有2种方式,一种是用了mui框架,可以用mui提供的管理方式,都封装好了。 还有一种是没有用mui,可以直接通过最底层的plus....

3588
来自专栏Python疯子

外部浏览器跳转到APP的指定页面

如果要实现跳转到指定页面,就需要传 参数 表示跳转到哪个页面,只需要在上面的网址里:即 ifr.src = 'com.zttd.webApp//参数'   

1812
来自专栏debugeeker的专栏

《coredump问题原理探究》windows版9.1节栈溢出

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

412
来自专栏零基础使用Django2.0.1打造在线教育网站

利用Flask搭建微电影视频网站(八):预告管理

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

731
来自专栏从零开始学自动化测试

selenium+python自动化96-执行jquery报:$ is not defined

前言 背景介绍:做wap页面自动化的时候,把url地址直接输入到浏览器(chrome浏览器有手机wap模式)上测试,有个按钮死活点不到,用wap模式的触摸事件也...

3036
来自专栏Python绿色通道

Python爬虫:学习Selenium并使用Selenium模拟登录知乎

现在开始要学习使用Python进行动态爬虫了,而Selenium是来进行动态爬虫的一种工具

784
来自专栏快乐八哥

手动实现jQuery Tools里面tab功能

平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的。当然有时同事喜欢使用jQue...

1709
来自专栏我的博客

zendframework学习笔记(初级版)

1.项目目录结构分析 application存放相关组件 application/configs配置文件 application/controllers控制...

2714

扫码关注云+社区