chrome扩大开辟之旅 第二篇

2019年8月30日 211次阅读 来源: WilsonLiu95

第二章简介

第二章较第一章庞杂很多。书中虽寥寥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托言完成扩大运用程序的国际化。
亮瞎～国际化～
概况见官方文档

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