让 Chrome API 支持 Promise
Chrome API 都是回调型,连续使用非常不方便,希望能改成 Promise 型。Chrome 本身不提供 promisify,不过可以自己写一个:
export default function promisify(original) {
return function (...args) {
return new Promise((resolve, reject) => {
original(...args, (...results) => {
if (chrome.runtime.lastError) {
reject(chrome.runtime.lastError.message);
} else {
resolve(...results);
}
});
});
}
}
这里有几个注意事项:
- 参数使用
...args进行拆解和合并,方便调用 - 需要检查
runtime.lastError,不然出错的时候浏览器会报错,影响体验
使用的时候,我比较喜欢只修改需要使用的函数,不打算 promisify 全部函数,大概是这样:
import promisify from './index';
/* global chrome */
export const update = promisify(chrome.tabs.update);
export const remove = promisify(chrome.tabs.remove);
export const get = promisify(chrome.tabs.get);
// 我觉得 `close tab` 看起来更合理
export const close = remove;
// 封装一个 `goto` 的快捷方式
export const goto = function (tabId, url) {
return update(tabId, {url});
}
// 全部导入,好处是简单,坏处是不方便 tree-shaking
import * as ChromeTabs from '../chrome-promisify/chrome.tabs';
ChromeTabs.goto(tabId, 'https://blog.meathill.com');
// 需要哪个导入哪个
import {goto} from '../chrome-promisify/chrome.tabs';
goto(tabId, 'https://github.com/meathill');
相关文章
分享自制小工具:Automate GPT – 在 ChatGPT 里批量执行任务
自制浏览器扩展 Automate GPT 分享:在 ChatGPT 网页里批量执行任务,把重复的提问流程自动化。介绍使用场景、安装方式与实现思路,适合经常用 ChatGPT 处理批量内容的同学。
2025-04-305 分钟
【教程】浏览器扩展中实现一键登录 Google(2)
浏览器扩展集成 Google 一键登录教程(下):用 chrome.identity API 实现 SSO 的完整代码解析,包括 manifest.json 配置、Login 方法实现、常见的坑与没有
2024-05-1110 分钟
【教程】浏览器扩展中实现一键登录 Google(1)
浏览器扩展集成 Google 一键登录教程(上):结合开发 AutomateGPT 的真实经验,讲解在 Chrome Web Store 占坑、创建 Google OAuth 凭据、配置 Supaba
2024-04-148 分钟


