【Chrome Extension】二、导航栏快速查询
介绍导航栏，输入fei，然后tab可进入当前扩展：Quick Query FeiFeiYeChuan CSDN Blogs，然后输入内容，即可在FeiFeiYeChuan博客下查找相干技能内容。
https://i-blog.csdnimg.cn/direct/07448f37cdbe4c1fbd7983fb0b851341.png
在博客的导航栏插入 Tip 按钮，点击按钮，界面中间显示“Quick Redirect To FeiFeiYeChuan”的快速导航。点击即可快速进入博客主页。
https://i-blog.csdnimg.cn/direct/9df75b40ba814c309bca59b0e322fa7e.png
插件内容
1、目录
https://i-blog.csdnimg.cn/direct/c5f606ce6c6e4565a43af8efb9ea4a4e.png
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 keyword
updateHistory(input);
});
async function updateHistory(input) {// 更新内存apiSuggestions
const { 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 });
};
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 day
chrome.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 response
const { 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;
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]