chrome插件项目的文件组成

manifest.json

该文件对应插件在浏览器的配置信息，十分重要，常用配置的属性如browser_action、background、content_scripts、permissions

{"manifest_version": 2,"name": "Oriente-form-fast","version": "1.0.0","description": "form-fast","icons":{"16": "./img/nipple.png","48": "./img/nipple.png","128": "./img/nipple.png"},"browser_action":{"default_icon": "./img/nipple.png","default_title": "表单重复提交很麻烦啊","default_popup": "./popup.html"},"background": {"page": "./background.html"},"content_scripts": [{"matches": ["https://ops.cashalo.com/*", "https://ops.finmas.co.id/*", "http://ops.cashalo.com/*", "http://ops.cashalo.com/*","http://localhost:8080/*","http://localhost:8081/*","http://0.0.0.0:8080/*","http://0.0.0.0:8081/*"],"js": ["js/content.js"],"run_at": "document_end"}],"web_accessible_resources": ["js/jquery-3.5.1.min.js", "js/popup.js", "js/tools.js", "js/content.js"],"permissions": ["storage"]
}

popup.js

用于插件环境运行下的js文件，可以在该js文件中对插件的功能进行编写，也能通过background.js来与客户端的content进行沟通，实现插件对于页面的控制。

content.js

用于植入进用户页面的脚本，起到客户端与插件进行沟通的作用，可以在该文件中使用chrome本身提供的沟通函数，来与插件进行沟通，但是函数体内的window依然是插件环境下的，而非浏览器页面下的window

background.js

用于与content沟通的脚本，起到与客户端直接沟通和帮助插件在popup中与content沟通的桥梁作用

插件运行的机理

运行流程图

popup.html作为插件下拉区域的展示内容，在其内部引入popup.js，完成插件自身的功能，它也能通过【B】方法向客户端content发送信息，客户端然回调后再接收客户端信息，完成交互。

通常可以把需要交互的方法定义在background中，然后通过调用background中的方法，来对前台页面进行交互，不过从popup引入background的方法需要进行特殊的方式引用，如下：

const BG = chrome.extension.getBackgroundPage();BG.functionName() // 进行对background方法对调用

popup向content推送信息，一般使用如下方法，该方法建议定义在background.js中

// 获取当前选项卡ID
function getCurrentTabId(callback){chrome.tabs.query({active: true, currentWindow: true}, function(tabs){if(callback) callback(tabs.length ? tabs[0].id: null);});
}function sendMessageToContentScript(message, callback){getCurrentTabId((tabId) =>{chrome.tabs.sendMessage(tabId, message, function(response){if(callback) callback(response);});});
}function sendInfoToContent() {// 向content发送信息chrome.browserAction.onClicked.addListener(function() {sendMessageToContentScript({data:'update', code:1}, (response) => {})})
}

然后content里注册监听函数

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {// todo}
)

content中也能主动向background中发起通话，然后在background.js中实现监听和回调，如下

// content.js
chrome.runtime.sendMessage( {greeting: '你好，我是content-script呀，我主动发消息给后台！'},function(response) {console.log(response, "后台的回复")}
)// background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){sendResponse('我已收到你的消息：' + JSON.stringify(request));// 做出回应
})

场景问题

异步数据同步到插件

因为插件本身的js运行环境和chrome提供的函数的运行环境，就算是放在content中，最后插入到浏览器页面中，也是与页面的运行环境隔离，举个例子：

// content.js
!function(){// 浏览器页面环境，能获得页面的windowconsole.log(window, "这是浏览器的window") chrome.runtime.sendMessage( {greeting: '你好，我是content-script呀，我主动发消息给后台！'},function(response) {// 插件环境，获得的window不属于页面console.log(window, "这是插件的window") })chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {// 插件环境，获得的window不属于页面console.log(window, "这是插件的window") })
}()

如果有一个场景，我需要获得异步数据，然后要将异步数据发送到插件要如何实现呢。首先想到把数据挂载到window，但是上文已经说明了window区分了不同的运行环境，插件无法直接获取页面的window。那么如何解决数据通信的问题？可以使用localStorage。

chrome为解决此类问题提供了一个解决途径，就是通过注册chrome.storage函数，它有点像使用localStorage但两者完全不同，前者只是提供了一个发布订阅的功能。

它的使用流程是：每当我有异步请求 -> 将得到数据更新至localStorage中 -> 当点开popup插件，告诉content执行取数据 -> content将localstorage里的数据通过storage.set发布 -> popup订阅得到最新的数据。整个流程意味着每次点开插件都能拿到最新的数据。

// popup.js 订阅事件
// 每次点开插件都会执行popup.js,告诉客户端该更新数据了BG.sendMessageToContentScript({data:'update', code:1}, (response) => {// 发布完成后，服务端进行订阅得到最新数据chrome.storage.sync.get(null, request => {const requestInfoList = JSON.parse(request.requestInfo)updateList(requestInfoList)})
})// content.js 发布事件
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {// 客户端收到信息，从localStorage获取信息进行发布switch(request.code) {case 1:console.log("是更新", request)chrome.storage.sync.set({requestInfo: localStorage.getItem('requestInfo')}, function() {sendResponse({data: 'finishi'});})break}            }
)

发布事件也能定义在popup，这样就能实现页面对于插件的一个响应功能。

那么可不可以实现异步数据得到就主动通知popup呢？

答：目前的做法还是通过点开插件这个操作先发起，然后进行更新，客户端异步场景主动发起信息推送到插件，还待解决

2.复杂数据共用问题

如果插件和页面想共用一个复杂对象，如同一个Vue实例，那么单纯使用localStorage有问题，把Vue对象存进localStorage可能会报错，那么还有其它什么方法可以解决？可以使用dom共享

插件和页面虽然运行环境隔离，但是同处于同一个浏览器下，所以都能访问到document这个对象及其方法，所以我们可以将服务端发送的数据存到dom私有属性，页面可以根据这个dom获取私有属性来获取该数据。

如何编写一个chrome插件相关推荐

怎么编写一个chrome插件
怎么编写一个chrome插件总觉得chrome插件这种东西很高端,很遥不可及.当然复杂的chrome插件开发起来确实比较困难,但是我们可以从一个简单的chrome插件demo慢慢入手,了解一下chr ...
从零开始编写一个vue插件
title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...
如何编写一个Jquery插件
首先我们来搞清楚一些关于Jquery插件的知识: 一.插件的种类: 封装对象方法的插件这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件封装全局函数的 ...
java插件开发_编写一个IDEA插件之：自动生成Java代码
我很喜欢IDEA的一键自动生成代码功能,例如自动生成构造方法.字段的Get/Set方法.ToString方法等等,除此之外,也有一些插件提供自动生成代码的功能,例如我们所熟悉的GsonFormat插件 ...
制作一个chrome插件
制作一个chrome插件要做两方面的准备文件准备在文件夹中,必需的两个文件 manifest.json 用于配置文件 index.html 插件的界面效果 manifest.json的内容 { ...
编写一个VSCode插件
原文链接: 编写一个VSCode插件 - 愧怍的小站自从使用过 VSCode 后就再也离不开 VSCode,其轻量的代码编辑器与诸多插件让多数开发者爱不释手.同样我也不例外,一年前的我甚至还特意买本 ...
编写一个IDEA插件之：事件监听
事件监听,我们最熟悉不过的就是开发APP时,监听按钮点击事件.手指触摸及移动事件.网络状态事件等等.事件监听大多通过观察者模式实现,首先API调用者不需要知道后台是如何检测出网络状态不可用的,而只需要 ...
设计和实现一个 Chrome 插件提升登录效率
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步.已进行4个月了,很多小伙伴表示收获颇丰. 前言在我们的 ...
如何从零开始开发一个 Chrome 插件？
什么是浏览器插件? 简单来说浏览器插件,是浏览器上的一种工具,可以提供一些浏览器没有的功能,帮你做一些有趣的事情.开发者可以根据自己的喜欢,去实现一些功能.插件基于Web技术(html.css.js) ...

如何编写一个chrome插件

chrome插件项目的文件组成

manifest.json

popup.js

content.js

background.js

插件运行的机理

场景问题

异步数据同步到插件

2.复杂数据共用问题

如何编写一个chrome插件相关推荐

最新文章

热门文章