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

相关文章

来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

247100
来自专栏开发之途

用WordPress搭建个人网站(1)

63460
来自专栏守望轩

Visual Studio 2008 每日提示(三十四)

#341、导出模板不选择“在资源管理器显示” 原文链接:What unchecking the display an explorer window on t...

30640
来自专栏Java技术分享

1.第一个SpringBoot应用和项目属性配置

SpringBoot和SpringMVC的区别 SpringBoot的特点:     1.简化配置     2.微服务的入门级微框架 此文章学习目标如...

35070
来自专栏北京马哥教育

两个成倍提高工作效率的 Vim 使用技巧

18960
来自专栏西安-晁州

golang学习之select用法

早期的select函数是用来监控一系列的文件句柄,一旦其中一个文件句柄发生IO操作,该select调用就会被返回。golang在语言级别直接支持select,用...

52300
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由 前情回顾 在上一篇《V...

24590
来自专栏王磊的博客

art-template用户注册方法

应用场景nodejs Express框架,使用art-template模板引擎。 后台注册方法代码: var template = require('art-t...

41480
来自专栏前端人人

React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

60430
来自专栏Java后端生活

EasyUI(一)--加载本地json数据

23140

扫码关注云+社区

领取腾讯云代金券