chrome扩展开发之旅 第二篇

2019年3月23日 238次阅读 来源: SQL

第二章简介

第二章较第一章复杂许多。书中虽寥寥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借口实现扩展应用程序的国际化。
亮瞎～国际化～
详情见官方文档

    原文作者：SQL
    原文地址: https://segmentfault.com/a/1190000004323109
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞