能否开发Chrome扩展拦截地址栏输入实现按关键词自定义跳转?
实现关键词跳转Chrome扩展所需API及实现方案
必须调用的Chrome API
chrome.omniboxAPI:专门用于监听地址栏用户输入交互,可直接捕获用户输入的完整内容做规则匹配,是实现地址栏输入监听的核心API。chrome.tabsAPI:匹配预设规则后调用该API的update方法修改当前标签页URL完成跳转,不匹配时不调用即可保留浏览器默认访问逻辑。chrome.storageAPI(可选):如果需要支持用户自定义关键词与跳转规则的配置,可使用该API持久化存储配置数据,不需要自定义功能的话可直接将规则硬编码在扩展代码中。chrome.webNavigationAPI(可选):如果你不需要设置omnibox触发前缀,希望监听所有用户地址栏输入回车后的导航请求,可以调用该API的onBeforeNavigate事件捕获导航地址做规则匹配。
获取地址栏输入内容的实现方法
方案1:通过omnibox API获取(需触发前缀)
该方案需要用户先输入你预设的触发关键词才会激活扩展的输入监听,适合避免误匹配的场景:
- 首先在扩展的
manifest.json中声明权限与omnibox配置:
{ "manifest_version": 3, "name": "关键词跳转工具", "version": "1.0", "omnibox": { "keyword": "jump" }, "background": { "service_worker": "background.js" }, "permissions": ["omnibox", "tabs"] }
以上配置中omnibox.keyword就是你设置的触发前缀,用户输入jump 后地址栏就会进入你的扩展的输入监听状态。
2. 在background.js中监听输入提交事件,直接获取用户输入内容:
chrome.omnibox.onInputEntered.addListener((inputContent) => { // inputContent就是用户在地址栏输入的、去除触发前缀后的完整内容 const [ruleKey, param] = inputContent.trim().split(' '); let targetUrl = ''; // 规则匹配逻辑示例 if (ruleKey === 'facebook') { targetUrl = `https://facebook.com/${param}`; } else if (ruleKey === 'linkedin') { targetUrl = `https://linkedin.com/in/${param}`; } // 匹配成功则跳转,不匹配则不做操作,保留默认逻辑 if (targetUrl) { chrome.tabs.update({ url: targetUrl }); } });
方案2:通过webNavigation API获取(无需触发前缀)
如果希望用户无需输入任何触发前缀,直接输入内容按回车后就做规则匹配,可以用该方案:
- 首先在
manifest.json中声明对应权限:
{ "manifest_version": 3, "name": "关键词跳转工具", "version": "1.0", "background": { "service_worker": "background.js" }, "permissions": ["webNavigation", "tabs"] }
- 在
background.js中监听导航前事件,解析用户输入的地址:
chrome.webNavigation.onBeforeNavigate.addListener((details) => { // 仅监听主框架的导航请求,过滤iframe等子资源请求 if (details.frameId !== 0) return; // 从details.url中解析用户输入的原始内容,用户输入非域名内容时浏览器默认会走搜索引擎搜索,可从搜索链接中提取输入内容 const urlObj = new URL(details.url); // 此处适配谷歌搜索引擎,你可以根据常用浏览器的默认搜索引擎调整匹配逻辑 if (urlObj.hostname.includes('google') && urlObj.pathname === '/search') { const searchQuery = urlObj.searchParams.get('q'); const [ruleKey, param] = searchQuery.trim().split(' '); let targetUrl = ''; if (ruleKey === 'facebook') { targetUrl = `https://facebook.com/${param}`; } else if (ruleKey === 'linkedin') { targetUrl = `https://linkedin.com/in/${param}`; } if (targetUrl) { // 阻止原搜索请求,跳转到目标地址 chrome.tabs.update(details.tabId, { url: targetUrl }); } } });
内容的提问来源于stack exchange,提问作者R.R
相关产品推荐
相关产品推荐

