【Chrome Extension】二、导航栏快速查询

feifeiyechuan

于 2024-12-23 20:40:06 发布

阅读量452

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Chrome Extension 文章标签： chrome 前端 ChromeExtension

本文链接：https://blog.csdn.net/feifeiyechuan/article/details/144676137

【Chrome Extension】二、导航栏快速查询

介绍

导航栏，输入fei，然后tab可进入当前扩展：Quick Query FeiFeiYeChuan CSDN Blogs，然后输入内容，即可在FeiFeiYeChuan博客下查找相关技术内容。
在这里插入图片描述
在博客的导航栏插入 Tip 按钮，点击按钮，界面中间显示“Quick Redirect To FeiFeiYeChuan”的快速导航。点击即可快速进入博客主页。

插件内容

1、目录

在这里插入图片描述

2、manifest.json

{
   
   
    "manifest_version": 3,
    "name":"Quick Query FeiFeiYeChuan CSDN Blogs",
    "version": "1.0.0",
    "icons": {
   
   
        "16": "images/icon16.png",
        "32": "images/icon16.png",
        "64": "images/icon16.png"
    },
    "background":{
   
         # background 随浏览器运行
        "service_worker": "service-worker.js",
        "type": "module"
    },
    "permissions":["storage", "alarms"],   # 内存权限和闹钟定时权限
    "minimum_chrome_version": "102",
    "omnibox":{
   
   
        "keyword": "fei"   # 使用导航栏，必须用到omnibox。关键字是 fei。
    },
    "host_permissions": ["https://extension-tips.glitch.me/*"],

    "content_scripts": [			# content内容
        {
   
   
          "matches": [
            "https://*.csdn.net/*",
            "https://blog.csdn.net/*",
            "https://*/blog.csdn.net/*"
            ],
          "js": ["content.js"]
        }
      ]
}

3、service-worker.js

import './sw-omnibox.js';	// 导入js文件
import './sw-tips.js';

// Save default API suggestions
chrome.runtime.onInstalled.addListener(({
    
     reason }) => {
   
   
    console.log("reason:", reason)
    if (reason === 'install') {
   
   			// 安装完成插件
      chrome.storage.local.set