工作心得体会

谷歌浏览器插件开发

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

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

  1. 当前目录结构



  1. 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://*/*" 
    ]
}
  1. 画页面
    页面只是纯的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)
  1. 存储值
    除了浏览器的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,不然会报错
  1. 通信和调用
    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;
#这里的返回必须添加,不然总是报错
})
  1. 右键菜单设置
chrome.contextMenus.create({ "id": "main", "visible": true, "title": "xxx", contexts: ['editable'], onclick: shenfenzheng })

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

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

  2. 样例地址:
    https://gitee.com/tuboyou/ChromeExtraTool4Test

上一篇下一篇

猜你喜欢

热点阅读