npm 包 chrome-extension-api 使用教程

介绍

npm 包 chrome-extension-api 可以帮助开发者在 Chrome 扩展程序中使用 Chrome API，在开发过程中提供更加便捷的操作接口，加速应用程序的开发进度。这篇文章将会详细介绍如何使用该 npm 包安装和使用 Chrome API。

准备工作

安装 Node.js 和 npm。在命令行执行以下命令：

npm install chrome-extension-api --save

使用教程

基本

1. 引入 npm 包：

   const chrome = require('chrome-extension-api');

2. 在监听事件时需要使用 chrome.runtime.onMessage.addListener 函数。

   chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     console.log(request);
   });

3. 在发送事件时需要使用 chrome.runtime.sendMessage 函数。

   chrome.runtime.sendMessage({ message: '你好 Chrome 扩展程序！' }, (response) => {
     console.log(response);
   });

高级

1. 获取当前标签页的 URL：

   chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
     console.log(tabs[0].url);
   });

2. 使用 chrome.storage 对扩展程序的本地存储进行读写。

   chrome.storage.sync.set({ 'key': 'value' }, () => {
     console.log('存储成功！');
   });
   
   chrome.storage.sync.get(['key'], (result) => {
     console.log(result.key);
   });

3. 使用 chrome.bookmarks 对书签进行增删改查。

   -- -------------------- ---- -------
   ------------------------------- -- -
     ---------------------------
   ---
   
   ------------------------- -------- --------- ------ ----------------------- -- ---------- -- -
     ---------------------
   ---
   
   -------------------------------------- - -------- ------ -- ---------- -- -
     ---------------------
   ---
   
   -------------------------------------- -- -- -
     ---------------------
   ---

总结

本文介绍了如何使用 npm 包 chrome-extension-api 安装和使用 Chrome API。除了基本使用，还介绍了一些高级用法，包括读写扩展程序的本地存储和对书签进行增删改查操作。希望读者能够通过该教程掌握 Chrome API 的使用方法，提高扩展程序的开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66e60