介绍

导航栏，输入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({apiSuggestions: ['Python', 'Django', 'Freeswitch']});console.log("apiSuggestions:", chrome.storage.local.get("apiSuggestions"))}if (reason === 'update') {			// 更新插件chrome.storage.local.set({apiSuggestions: ['Python', 'Django', 'Freeswitch']});console.log("apiSuggestions:", chrome.storage.local.get("apiSuggestions"))}});

4、sw-omnibox.js

console.log("sw-omnibox.js")const URL_CHROME_EXTENSIONS_DOC ='https://so.csdn.net/so/search?t=blog&u=feifeiyechuan&q=';      // 指定博客下查询内容
const NUMBER_OF_PREVIOUS_SEARCHES = 4;// Display the suggestions after user starts typing
chrome.omnibox.onInputChanged.addListener(async (input, suggest) => {   // omibox内容改变事件await chrome.omnibox.setDefaultSuggestion({description: '输入FeiFeiYeChuan关键查询'                  });const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');console.log("111apiSuggestions:", apiSuggestions)const suggestions = apiSuggestions.map((api) => {return { content: api, description: `Open CSDN FeiFeiYeChuan.${api}` };});console.log("222suggestions:", suggestions)suggest(suggestions);
});// Open the reference page of the chosen API
chrome.omnibox.onInputEntered.addListener((input) => {   // omibox回车事件console.log("chrome.tabs:", chrome.tabs)chrome.tabs.create({ url: URL_CHROME_EXTENSIONS_DOC + input });console.log("chrome.tabs:", chrome.tabs)// Save the latest keywordupdateHistory(input);
});async function updateHistory(input) {  // 更新内存apiSuggestionsconst { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');console.log("apiSuggestions:", apiSuggestions)apiSuggestions.unshift(input);console.log("apiSuggestions:", apiSuggestions)apiSuggestions.splice(NUMBER_OF_PREVIOUS_SEARCHES);console.log("apiSuggestions:", apiSuggestions)return chrome.storage.local.set({ apiSuggestions }); }

5、sw-tips.js

console.log("sw-tips.js")
// Fetch tip & save in storage
const updateTip = async () => {const tips = ["<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>","<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>","<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>","<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>","<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>","<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>","<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>",];const randomIndex = Math.floor(Math.random() * tips.length);return chrome.storage.local.set({ tip: tips[randomIndex] });};const ALARM_NAME = 'tip';// Check if alarm exists to avoid resetting the timer.// The alarm might be removed when the browser session restarts.async function createAlarm() {const alarm = await chrome.alarms.get(ALARM_NAME);if (typeof alarm === 'undefined') {chrome.alarms.create(ALARM_NAME, {delayInMinutes: 1,periodInMinutes: 1440});updateTip();}}chrome.alarms.clearAll()createAlarm();// Update tip once a daychrome.alarms.onAlarm.addListener(updateTip);// Send tip to content script via messaging
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {   // 接受content         if (message.greeting === 'tip') {console.log("chrome.storage.local.get('tip'):", chrome.storage.local.get('tip'))chrome.storage.local.get('tip').then(sendResponse);return true;}});

6、content.js

(async () => {// Sends a message to the service worker and receives a tip in responseconst { tip } = await chrome.runtime.sendMessage({ greeting: 'tip' });const nav1 = document.querySelector('.toolbar-container-left');const vip = document.querySelector('.toolbar-btn-vip');const nav = nav1? nav1: vip;const tipWidget = createDomElement(`<button type="button" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0 12px; height: 36px;background:red;line-height:36px;"><span style="display: block; font: var(--devsite-link-font,500 14px/20px var(--devsite-primary-font-family));">Tip</span></button>`);const popover = createDomElement(`<div id='tip-popover' popover style="margin: auto;">${tip}</div>`);document.body.append(popover);nav.append(tipWidget);})();function createDomElement(html) {const dom = new DOMParser().parseFromString(html, 'text/html');return dom.body.firstElementChild;}