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 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4045
来自专栏java 成神之路

使用 NIO 实现 echo 服务器

4717
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2587
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4868
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2070
来自专栏魂祭心

原 canvas绘制clock

4164
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

4768
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

31810
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2655

扫码关注云+社区