介绍
npm 包是现代前端开发中非常重要的工具，使用它能够有效地管理和发布 JavaScript 代码。而 oujs（OpenUserJS）则是一个开源的用户脚本存储库，它提供了大量的脚本和插件，可以在浏览器中帮助我们解决一些问题和提高工作效率。
在这篇文章中，我将会和大家一起学习如何使用 oujs 这个 npm 包，包括它的安装、常用 API 以及使用示例。
安装 oujs
要在你的项目中使用 oujs npm 包，首先需要通过 npm 来安装它：
npm install oujs
常用 API
GM
在 oujs 中，最常用的对象是名为 GM 的对象，它是暴露在全局作用域下的全局对象。在使用 GM 对象之前，我们需要首先导入它：
const GM = require('oujs');GM 对象提供了一系列的 API，使我们能够更方便地开发脚本。这里列出了一些常用的 API：
- GM_addStyle：向页面中添加样式
- GM_xmlhttpRequest：向远程服务器发送 HTTP 请求
- GM_setValue：设置本地存储的值
- GM_getValue：获取本地存储的值
GM_addStyle
GM_addStyle() 方法可以向页面中动态添加 CSS 样式。这里是一个简单的例子：
GM_addStyle("body { background-color: black; color: white; }");GM_xmlhttpRequest
GM_xmlhttpRequest() 方法可以向远程服务器发送 HTTP 请求，并返回服务器响应的数据。下面是一个基本的请求示例：
GM_xmlhttpRequest({
method: "GET",
url: "http://example.com",
onload: function(response) {
console.log("Response", response.responseText);
}
});GM_setValue 和 GM_getValue
GM_setValue() 和 GM_getValue() 方法分别用于设置和获取本地存储的值。下面是一个例子：
// 设置本地存储的值
GM_setValue("name", "Tom");
// 获取本地存储的值
console.log(GM_getValue("name"));使用示例
这里是一个完整的示例，它向页面中添加了一个按钮，当点击这个按钮时，它向远程服务器发送一个 HTTP 请求，并在请求成功后，向页面中添加一张图片。
-- -------------------- ---- -------
-- -- -- --
----- -- - ----------------
-- -------------
----- ------ - ---------------------------------
---------------- - ------ -------
----------------------------------
-- ---------
-------------------------------- ---------- -
-- -------- ---- --
-------------------
------- ------
---- ---------------------------------------------
------- ------------------ -
-- ---- ----- -------------
----- --- - ------------------------------
------- - ------------------
-------------------------------
--
-------- ------------- -
-------------------- -----
-
---
---总结
在本文中，我们学习了如何使用 oujs npm 包，在项目中轻松使用它提供的 API 解决问题。虽然本文只涉及了 oujs 的基本使用方法，但是它对于前端工程师来说是非常有用的工具，它可以大大提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d681e8991b448e02f7