谷歌浏览器插件开发

2020-08-17 本文已影响0人魔王大柚子

新手笔记，有建议，请告诉我

项目文件夹中：
manifest.json #用于配置插件的权限和信息，以及对应文件的路径
option.html #用于选项的配置页面，就是右击右上角插件显示选项的页面
popup.html #用于画popup的页面，popup就是右上角点击插件后显示的页面
devtools.html #devtiool的导航页面,没什么作用，但是一定要有
devtool.html #用于画devtool的页面
js文件夹
css文件夹
img文件夹
fonts文件夹

js文件夹中：
a.js #用于读取文档的js文件，权限也只能操作文档
background.js #用于运行初始化的js，可以设置右键菜单，可以跨域请求
dev.js #用于devtool页面配对的js文件
devtools.js #用于配置devtool的页面
pp.js #用于popup页面配对的js文件

img文件夹中：
png.png #用于插件的图片，暂时发现必须是png格式

其他使用的css框架放入对应文件夹即可，当前使用bootstrap框架

manifest.json

{
  "name": "测试工具",
  "manifest_version": 2,
  "version": "0.0.1",
  "description": "一切为了测试",
  "icons":
    {
        "16": "img/png.png",
        "48": "img/png.png",
        "128": "img/png.png"
    },
  "browser_action": {
    "default_icon": "img/png.png",
    "default_title": "这是一个Chrome插件,一起为了测试",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["js/a.js"]
    }
  ],
  "background":
    {
        
        "scripts": ["js/background.js"]
    },
    "options_page": "option.html",
    
    "options_ui":
    {
        "page": "option.html",
        
        "chrome_style": true
    },
  "homepage_url": "https://www.baidu.com",
  "devtools_page": "devtools.html",
  "permissions":
    [
        "contextMenus", 
        "tabs", 
        "notifications", 
        "webRequest", 
        "webRequestBlocking",
        "storage", 
        "http://*/*", 
        "https://*/*" 
    ]
}

画页面
页面只是纯的html代码，如果使用onclick之类触发js的方法，这里的会报错，需要在js绑定操作

radio 的方式：获得：$('input[type=radio][name=addr]').change(function () {this.value}），赋值：$('input[type=radio][value=' + items.ele + ']')[0].checked = true 
勾选框的方式：获得： $('#num1').change(function () {this.checked}） ，赋值：$('#num1')[0].checked = items.num
输入框的方式： 获得：$('#f1').change(function () {this.value }） ，赋值：$('#f1')[0].value = items.f
select的方式： 获得：$('#addr').change(function () {this.options[this.selectedIndex].value}） ，赋值：$("#addr").val(items.addr)

存储值
除了浏览器的localStorage等存储信息，还有插件特有的功能：

$('#addr').change(function () {
    chrome.storage.sync.set({ addr: this.options[this.selectedIndex].value }, function () {
        chrome.storage.sync.get({ addr: '310000' }, function (items) {
            console.log(items.addr);
        });
    });
});
#此处存的值不能大于4K，不然会报错

通信和调用
background.js 通知 context(a.js) 使用sendmessage的通信：

#background.js 发送信息，使用：
function sendMessageToContentScript(message, callback) {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
      if (callback) callback(response);
    });
  });
}

# a.js中接受信息，使用：
  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{}）
#其中当刷新组件代码后，还需要刷新测试页面，保证通信一致

在dev.js中调用background.js 中的方式：

chrome.extension.getBackgroundPage().xxxx方法;

在a.js,通知background.js:

#a.js中：
chrome.runtime.sendMessage({ cmd: 'c', value: v }, function(response) {
          console.log('收到来自后台的回复：' + response);
        });

#background.js中：
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
sendResponse(xxxx)
return true;
#这里的返回必须添加，不然总是报错
}）

右键菜单设置

chrome.contextMenus.create({ "id": "main", "visible": true, "title": "xxx", contexts: ['editable'], onclick: shenfenzheng })

其中的contexts当为normal时，可以显示多级菜单，不然只能显示一级

运行方式
1，谷歌浏览器或者谷歌内核的浏览器选择扩展程序、或者应用中心等管理插件的地方
2，打开开发者模式
3，加载已解压的扩展程序，指定到项目目录，即可
其他方式,打包扩展程序，指定到项目目录，打包，生成pem文件和crx文件。可以把crx上传到谷歌的应用商店，不过需要5美元；或者把crx格式改成zip格式，给他人后，拖拽进入开发者模式的插件管理页面。
样例地址：
https://gitee.com/tuboyou/ChromeExtraTool4Test

谷歌浏览器插件开发

猜你喜欢

热点阅读