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

介绍

导航栏，输入fei，然后tab可进入当前扩展：Quick Query FeiFeiYeChuan CSDN Blogs，然后输入内容，即可在FeiFeiYeChuan博客下查找相干技能内容。

在博客的导航栏插入 Tip 按钮，点击按钮，界面中间显示“Quick Redirect To FeiFeiYeChuan”的快速导航。点击即可快速进入博客主页。

插件内容

1、目录

2、manifest.json

1. {
2.     "manifest_version": 3,
3.     "name":"Quick Query FeiFeiYeChuan CSDN Blogs",
4.     "version": "1.0.0",
5.     "icons": {
6.         "16": "images/icon16.png",
7.         "32": "images/icon16.png",
8.         "64": "images/icon16.png"
9.     },
10.     "background":{      # background 随浏览器运行
11.         "service_worker": "service-worker.js",
12.         "type": "module"
13.     },
14.     "permissions":["storage", "alarms"],   # 内存权限和闹钟定时权限
15.     "minimum_chrome_version": "102",
16.     "omnibox":{
17.         "keyword": "fei"   # 使用导航栏，必须用到omnibox。关键字是 fei。
18.     },
19.     "host_permissions": ["https://extension-tips.glitch.me/*"],
21.     "content_scripts": [                        # content内容
22.         {
23.           "matches": [
24.             "https://*.csdn.net/*",
25.             "https://blog.csdn.net/*",
26.             "https://*/blog.csdn.net/*"
27.             ],
28.           "js": ["content.js"]
29.         }
30.       ]
31. }

复制代码

3、service-worker.js

1. import './sw-omnibox.js';        // 导入js文件
2. import './sw-tips.js';
4. // Save default API suggestions
5. chrome.runtime.onInstalled.addListener(({ reason }) => {
6.     console.log("reason:", reason)
7.     if (reason === 'install') {                        // 安装完成插件
8.       chrome.storage.local.set({
9.         apiSuggestions: ['Python', 'Django', 'Freeswitch']
10.       });
11.       console.log("apiSuggestions:", chrome.storage.local.get("apiSuggestions"))
12.     }
13.    
14.     if (reason === 'update') {                        // 更新插件
15.         chrome.storage.local.set({
16.           apiSuggestions: ['Python', 'Django', 'Freeswitch']
17.         });
18.         console.log("apiSuggestions:", chrome.storage.local.get("apiSuggestions"))
19.       }
20.   });

复制代码

4、sw-omnibox.js

1. console.log("sw-omnibox.js")
3. const URL_CHROME_EXTENSIONS_DOC =
4.   'https://so.csdn.net/so/search?t=blog&u=feifeiyechuan&q=';      // 指定博客下查询内容
5. const NUMBER_OF_PREVIOUS_SEARCHES = 4;
7. // Display the suggestions after user starts typing
8. chrome.omnibox.onInputChanged.addListener(async (input, suggest) => {   // omibox内容改变事件
9.   await chrome.omnibox.setDefaultSuggestion({
10.     description: '输入FeiFeiYeChuan关键查询'                  
11.   });
12.   const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
13.   console.log("111apiSuggestions:", apiSuggestions)
14.   const suggestions = apiSuggestions.map((api) => {
15.     return { content: api, description: `Open CSDN FeiFeiYeChuan.${api}` };
16.   });
17.   console.log("222suggestions:", suggestions)
18.   suggest(suggestions);
19. });
22. // Open the reference page of the chosen API
23. chrome.omnibox.onInputEntered.addListener((input) => {   // omibox回车事件
24.     console.log("chrome.tabs:", chrome.tabs)
25.   chrome.tabs.create({ url: URL_CHROME_EXTENSIONS_DOC + input });
26.   console.log("chrome.tabs:", chrome.tabs)
27.   // Save the latest keyword
28.   updateHistory(input);
29. });
31. async function updateHistory(input) {  // 更新内存apiSuggestions
32.     const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
33.     console.log("apiSuggestions:", apiSuggestions)
34.     apiSuggestions.unshift(input);
35.     console.log("apiSuggestions:", apiSuggestions)
36.     apiSuggestions.splice(NUMBER_OF_PREVIOUS_SEARCHES);
37.     console.log("apiSuggestions:", apiSuggestions)
38.     return chrome.storage.local.set({ apiSuggestions });
39.   }

复制代码

5、sw-tips.js

1. console.log("sw-tips.js")
2. // Fetch tip & save in storage
3. const updateTip = async () => {
4.     const tips = [
5.         "<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>",
6.         "<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>",
7.         "<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>",
8.         "<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>",
9.         "<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>",
10.         "<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>",
11.         "<p><a href='https://blog.csdn.net/feifeiyechuan'>Quick Redirect To FeiFeiYeChuan</a></p>",
12.     ];
13.     const randomIndex = Math.floor(Math.random() * tips.length);
14.     return chrome.storage.local.set({ tip: tips[randomIndex] });
15.   };
16.   
17.   const ALARM_NAME = 'tip';
18.   
19.   // Check if alarm exists to avoid resetting the timer.
20.   // The alarm might be removed when the browser session restarts.
21.   async function createAlarm() {
22.     const alarm = await chrome.alarms.get(ALARM_NAME);
23.     if (typeof alarm === 'undefined') {
24.       chrome.alarms.create(ALARM_NAME, {
25.         delayInMinutes: 1,
26.         periodInMinutes: 1440
27.       });
28.       updateTip();
29.     }
30.   }
31.   chrome.alarms.clearAll()
32.   
33.   createAlarm();
34.   
35.   // Update tip once a day
36.   chrome.alarms.onAlarm.addListener(updateTip);
39.   // Send tip to content script via messaging
40. chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {   // 接受content         
41.     if (message.greeting === 'tip') {
42.         console.log("chrome.storage.local.get('tip'):", chrome.storage.local.get('tip'))
43.       chrome.storage.local.get('tip').then(sendResponse);
44.       return true;
45.     }
46.   });

复制代码

6、content.js

1. (async () => {
2.     // Sends a message to the service worker and receives a tip in response
3.     const { tip } = await chrome.runtime.sendMessage({ greeting: 'tip' });
4.   
5.     const nav1 = document.querySelector('.toolbar-container-left');
6.     const vip = document.querySelector('.toolbar-btn-vip');
7.     const nav = nav1? nav1: vip;
8.    
9.     const tipWidget = createDomElement(`
10.       <button type="button" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0 12px; height: 36px;background:red;line-height:36px;">
11.         <span style="display: block; font: var(--devsite-link-font,500 14px/20px var(--devsite-primary-font-family));">Tip</span>
12.       </button>
13.     `);
14.   
15.     const popover = createDomElement(
16.       `<div id='tip-popover' popover style="margin: auto;">${tip}</div>`
17.     );
18.   
19.     document.body.append(popover);
20.     nav.append(tipWidget);
21.   })();
22.   
23.   function createDomElement(html) {
24.     const dom = new DOMParser().parseFromString(html, 'text/html');
25.     return dom.body.firstElementChild;
26.   }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。