基于Chrome插件的调试方案

打造自用的Chrome插件，实现与浏览器功能的交互

实现效果

关于插件的展示

成功记录站点信息用于本地调试

当前站点为不可调试的站点

插件基础

文件目录

├── backgounrd.js
├── icon.png
├── lodebug.js
├── popup.html
├── popup.js
└── manifest.json

基础用法

mainfest.json

chrome插件的核心配置文件,用于声明版本信息和配置API功能的清单

属性	说明
manifest_version	配置文件版本
name	插件名称
description	鼠标滑过右上角小标提示信息
icons	图标
browser_action	定义右上角小标的滑出页面(popup窗)
background	运行在 chrome 后台的脚本
content_scripts	注入访问网页的脚本
permissions	允许调用的API功能

{
    "manifest_version": 2,
    "name": "LinkOfficeDebug",
    "description": "用于LinkOffice本地调试",
    "version": "1.0",
    "icons": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
    },
    "browser_action": {
        "default_": "icon.png",
        "default_title": "LinkOffice调试",
        "default_popup": "popup.html"
    },
    "background": {
        "scripts": [
            "backgounrd.js"
        ]
    },
    "content_scripts": [
        {
            "matches": [
                "*://localhost/*"
            ],
            "js": [
                "lodebug.js"
            ],
            "run_at": "document_start"
        }
    ],
    "permissions": [
        "notifications",
        "tabs",
        "cookies",
        "debugger",
        "http://*/*",
        "https://*/*"
    ]
}

html+css即可实现滑出窗(popup窗)的界面

可以用js调用后台脚本的方法

如:

直接调用

1 2	let bg = chrome.extension.getBackgroundPage(); bg.func()

与后端通信接收返回值

1
2
3

chrome.runtime.sendMessage({ op: 'init', }, function (response) {
   //do something
});

backgound.js

可以调用多种浏览器功能,如操作Cookie/改变页签/改变视窗

与popup页面通信的方式:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  
  //接收消息 并处理

  //需要return true,才会同步等待popup.html的调用,否则会异步返回
  return true
})