chrome扩展开发之旅第二篇

shadajin 发布于2019-08-19 17:25 / 602人阅读

摘要：跨域请求跨域问题，是开发中一直以来需要注意的问题。则发送通道的发送给监听此消息的外部扩展。完整方法此处，为必选参数，为回调函数。回调函数接收到的参数有三个，分别是和，即消息内容，消息发送者相关信息和相应函数。是发起消息的标签。

第二章简介

第二章较第一章复杂许多。书中虽寥寥21页，内容却也不少。涵盖了8个小节。

2.1 操作用户正在浏览的页面

2.2 跨域请求

2.3 常驻后台

2.4 带选项页面的扩展

2.5 扩展页面间的通信

2.6 存储数据

2.7 i18n

2.1 操作用户正在浏览的页面

实际上就是对用户当前浏览器页面的DOM进行操作。通过manifest.json中的content_scripts属性，可以指定将哪些脚本注入到哪些页面中，当用户访问这些页面后，相应的脚本既可自动运行，从而对页面DOM进行操作。

content_scripts属性值为数组类型，数组的每个元素可以包含如下属性：

matches  //定义哪些页面会被注入脚本
exclude_matches  // 定义哪些页面不会注入脚本
js  // 对应要注入的js文件
css  //对应要注入的css文件
run_at  //定义何时进行注入
all_frames  //定义脚本是否会注入到嵌入式框架中
include_globs  //全局url匹配需要进行注入的页面
exclude_globs  //全局url匹配不被注入的脚本的页面

简单的说，如果url匹配matchew的值同时页匹配include_globs的值，会被注入。
如果url匹配exclude_matches的值或者匹配exclude_globs的值，则不会被注入。

注意：脚本知识共享页面的DOM,但是DOM中的自定义属性不会被共享，并且不共享页面内嵌javascript 的命名空间。也就是说，当前页面的javascript有一个全局变量a，注入的脚本中也有一个全局变量a，两者不会互相干扰。

2.2 跨域请求

跨域问题，是web开发中一直以来需要注意的问题。但是在chrome扩展中，为了真正使chrome插件强大起来，chrome允许chrome扩展应用不必受限于跨域限制。但是，出于安全考虑，需要在manifest.json文件中的permissions属性中生命需要跨域的权限。

举例如下：

{   
  ...   
  "permissions": [
     "_://_.baidu.com/*"   
     ]
}

2.3 常驻后台

当我们希望扩展或应用在自动运行并常驻后台时就需要用到本节的知识了。

在manifest.json中指定background域可以使扩展常驻后台。background包括3中属性，分别是scripts,
page和persistent。

如果指定了scripts属性，chrome会在扩展启动时自动创建一个包含所有指定脚本的页面；

如果指定了page属性，则chrome会将指定的html文件自动加载作为后台页面运行；

persistent则定义了常驻后台的方式，true时，表示一直在后台运行，占用内存，不友好，不推荐。false为按需运行，也就是chrome后来提出的Event Page，如非必要请设置为false。默认值为true。

2.4 带选项的页面的扩展

有一些扩展允许用户进行个性化设置，这样就需要向用户提供一个选项页面。
同样，这需要通过在manifest.json中设置。对应的属性为options_page。

例子如下：

{
  ...
  "options_page": "options.html"
}

2.5 扩展页面间的通信

有时需要让同一个扩展中的不同页面之间，或者不同扩展的多个页面之间相互传输数据，以获得彼此的状态。
chrome提供了4个有关接口，分别是：

runtime.sendMessage
runtime.onMessage
runtime.connect
runtime.onConnect

书中只讲解了前者，后者为更高级的接口，留待读者自己去研究。
此处我查找到一个比较好的文档，与大家参考。
runtime.connect

runtime.sendMessage完整的方法

  chrome.runtime.sendMessage(extensionId,message,options,callback)

extensionId为所发送消息的目标扩展，默认为扩展本身。

message 为要发送的内容，类型随意。

options 为对象类型包含了一个值为布尔型的includeTlsChannelId属性。true则发送TLS通道的ID
发送给监听此消息的外部扩展。这个参数大部分情况下可不必理睬。

callback是回调函数，用于接收返回结果。

runtime.onMessage完整方法

chrome.runtime.onMessage.addListener(callback)
此处，callback为必选参数，为回调函数。回调函数接收到的参数有三个，分别是message,
sender和sendResponse，即消息内容，消息发送者相关信息和相应函数。其中，sender对象包含4个属性，分别是tab,id,url,tlsChannelId。tab是发起消息的标签。

2.6 存储数据

三种方法以及适用情况

html5的localStorage //适用于一般的扩展

chrome提供的存储API //适用于保存结构稍微复杂些的数据，可保存任意类型的数据

使用Web SQL Database //使用的较少，比较复杂，需要使用SQL对数据库进行读写操作，适用于数据量庞大的应用

localstorage

localstorage.getItem()
localstorage.setItem()
localstorage.removeItem()

chrome提供的存储API

使用时必须在manifest.json中的permissions声明"storage",之后才有权限调用。
chrome的存储API提供两种存储区域，分别是sync与local。区别在于sync存储区域会根据用户当前在
chrome上登陆的google账户自动同步数据，当无网络连接可用时，两者一致。
chrome提供5种方法，分别是

chrome.storage.sync.get(keys,function(result){})
chrome.storage.sync.getBytesInUse(keys,function(bytes){})
chrome.storage.sync.set(items,function(){})
chrome.storage.sync.remove(keys,function(){})
chrome.storage.sync.clear(function({}))

sync也可以替换为local

使用Web SQL Database

3个核心方法

openDatabase //与数据库建立连接
transaction  //执行查询
executeSql   //执行SQL语句

2.7 i18

使用i18n借口实现扩展应用程序的国际化。
亮瞎～国际化～
详情见官方文档

云服务器混合云第二篇 phpcms从第二篇 chrome webrtc 开发开发扩展

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78501.html

chrome扩展开发之旅第三篇

摘要：第三章目录简述右键菜单桌面提醒简述这部分对于前端的人来说是基础。已经将的权限开放了。制作实时查询美元价格的扩展代码部分部分查询美元当日价格图片请自行选用。第三章目录 3.1 CSS简述 3.2 Browser Actions 3.3 右键菜单 3.4 桌面提醒 3.5 omnibox 3.6 Page Actions 3.1 CSS简述这部分对于前端的人来说是基础。就不说了 3...

shuibo 2019-08-22 11:00 评论0 收藏0
chrome扩展开发之旅第一篇

摘要：扩展及应用介绍与区别介绍支持开发者为其编写各种各样的扩展与应用来扩充其功能。用处安装扩展之后，就会读取扩展中的文件。结语以上就是第一章的总结，接下来的笔记，敬请期待原书项目代码下载扩展及其应用开发读书笔记介绍寒假想自己做一个chrome扩展，便从图书馆借了这本书。同时，为了培养自己的好习惯，做沉淀，便读一章写一篇总结，全书总共10章，将会分为10篇博文。欢迎大家多多指正，也希望大家...

lei___ 2019-08-19 17:25 评论0 收藏0
chrome扩展开发之旅第四篇

摘要：目录结构书签历史管理扩展与应用标签书签第一步，在中声明书签的个属性，并不是每个书签都有这个对象，如书签文件夹就不具有属性。调整书签位置更新书签删除书签和空的书签分组删除包含书签的书签分组获取完整的书签内容书签的事件第一步，先行在中声明。目录结构 4.1 书签 4.2 Cookies 4.3 历史 4.4 管理扩展与应用 4.5 标签 4.6 overridePages 4.1 书...

jackwang 2019-08-19 17:26 评论0 收藏0
chrome扩展开发之旅第五篇

摘要：目录结构下载网络请求代理系统信息本章讲解的是部分较为高级的，以供哪些有更高要求的读者阅读。对于目前的网络请求，笔记实用的功能包括阻断链接，更改和重定向。系统信息声明方法三个接口都提供了的方法目录结构 5.1 下载 5.2 网络请求 5.3 代理 5.4 系统信息本章讲解的是部分较为高级的API，以供哪些有更高要求的读者阅读。 5.1 下载声明 permissions: [ ...

NotFound 2019-08-19 17:26 评论0 收藏0
【PWA学习与实践】(5)在Web中进行服务端消息推送

摘要：本文是学习与实践系列的第五篇文章。实际上，消息推送与提醒是两个功能和。在这一篇里，我们先来学习如何使用进行消息推送。而当服务端要推送消息时，会使用私钥对发送的数据进行数字签名，并根据数字签名生成一个叫请求头。《PWA学习与实践》系列文章已整理至gitbook - PWA学习手册，文字内容已同步至learning-pwa-ebook。转载请注明作者与出处。本文是《PWA学习与实践》系...

suemi 2019-08-23 12:48 评论0 收藏0