npm 包 bookmarkletify 使用教程

当我们在网页浏览中遇到常用但不常访的页面时,我们会将其添加进书签进行管理。但是,对于某些功能特别复杂的页面,书签就显得有些力不从心了。这时候,Bookmarklet 就发挥出了它的作用。

Bookmarklet 是一种嵌入到 URL 中的 JavaScript 代码。只要将该 URL 添加到浏览器的书签栏中并点击书签,在任何页面上单击该书签就能够运行 JavaScript 代码。换句话说,它实际上是将 JavaScript 代码添加到一个书签中,以便插入到浏览器的任何页面中。

在之前,每次我们需要编写自己的 Bookmarklet 代码时,不仅复杂而且重复,这使得我们不得不查找大量的在线文档,并在浏览器的开发工具中输入代码来测试。因此,bookmarkletify 这个 npm 包就应运而生了。它旨在简化 Bookmarklet 开发的流程,通过将普通的 JavaScript 代码转换成一个可用于保存到书签栏中的单行压缩代码。

在本篇文章中,我们将介绍如何使用 bookmarkletify 生成自己的 Bookmarklet

安装 bookmarkletify

首先,我们需要确认您已经安装 Node.js。当您的 Node.js 安装完成后,我们可以在命令行中输入以下内容来全局安装 bookmarkletify

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

这将会将 bookmarkletify 安装在全局路径中,以便以后在任何地方使用。

使用 bookmarkletify

接着,假如您已有一段 JavaScript 代码,我们可以通过在命令行中输入以下内容来将其转换为 Bookmarklet

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

在上面的命令中,我们将使用 <> 在输入和输出之间进行传输。该命令将从文件 script.js 读取输入内容,并将其压缩成一行,并将其保存到名为 bookmarklet.js 的新文件中。

一个示例的命令如下:

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

此命令会将文件 ./test.js 读取为输入,然后压缩成一行,并将其保存到新文件 ./bookmarklet.js 中。

测试样例

以下代码是 Bookmarklet 示例代码,可以将文本框中的内容复制到剪贴板中:

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

要将其转换为 Bookmarklet,您可以创建一个名为 test.js 的新文件,并将示例代码贴到新文件中:

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

接着,可以使用 bookmarkletify 命令来创建新的 Bookmarklet

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

接下来,将生成的 bookmarklet.js 文件的内容复制到浏览器中新建的书签栏项的网址中。现在,您只需单击该书签就可以运行 Bookmarklet 代码,并在页面中执行复制剪贴板操作。

总结

借助 bookmarkletify,开发 Bookmarklet 变得轻松简单。通过一些简单的步骤即可将普通的 JavaScript 代码转换成适用于浏览器的 Bookmarklet 代码。在您需要开发 Bookmarklet 时,不妨尝试使用 bookmarkletify 进行开发,它将极大地提高你的工作效率。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/78206


猜你喜欢

  • 使用 passport-openid 实现基于 OpenID 的用户认证

    前言 在 Web 应用程序和 API 中,用户认证是非常关键和必要的一部分。一方面,通过实现用户认证,可以确保只有授权访问的用户才能访问某些资源。另一方面,用户认证还可以帮助我们实现个性化的数据展示,...

    5 年前
  • npm 包 passport-google 使用教程

    前言 在当今互联网时代,用户需要多个账户才能使用不同的应用程序和服务。为了避免使用不同的用户名和密码,网站和应用程序通常使用 OAuth 和 OpenID Connect 协议以实现对外部认证系统的对...

    5 年前
  • npm 包 express-form 使用教程

    Express 是一种流行的 node.js web 框架,它能够方便地建立 web 应用。但是,处理表单数据可能会变得有些困难。幸运的是,npm 包 express-form 可以轻松地为你解决这个...

    5 年前
  • npm 包 Cloudpub 使用教程

    Cloudpub 是一个基于 Node.js 和 Express 的轻量级 web 应用框架,它可以让我们快速搭建起一个支持云存储的 web 应用,并且易于部署。本篇文章将详细介绍如何使用 npm 包...

    5 年前
  • npm 包 cm 使用教程

    简介 cm(Commander)是一个轻量级的Node.js命令行界面(CLI)工具,可帮助我们以一种更简洁和优雅的方式实现命令行界面的功能。即使没有什么NodeJS经验,使用cm也非常简单。

    5 年前
  • npm 包 co-client 使用教程

    简介 在现代的前端开发中,为了提高开发效率,我们经常会使用一些现成的库或者框架。在这个过程中,我们少不了使用 npm 包来进行包管理。而 co-client 是一个非常实用的 npm 包,可以帮助我们...

    5 年前
  • npm 包 compound 使用教程

    简介 compound 是一款基于 Node.js 平台的 web 框架,它使用了许多优秀的 Node.js 模块与技术,例如 Express、EJS、CoffeeScript、Less 等,封装出了...

    5 年前
  • npm包 co-assets-compiler 使用教程

    在前端开发中,我们经常需要将一些文件构建成可运行的静态资源文件。co-assets-compiler是一个能够将Markdown、CSS、JavaScript等文件编译成可供网页使用的JS、CSS、H...

    5 年前
  • npm包cmd-util使用教程

    如果你是一名前端开发人员,你可能经常遇到需要在项目中使用命令行工具的情况。提高你的效率,让你的工作更加简单和高效的方式之一就是使用npm包cmd-util。cmd-util是一个使用Node.js编写...

    5 年前
  • npm 包 log_ 使用教程

    在前端项目中,我们通常需要对代码进行调试和日志打印,以便更好地了解程序的运行情况。而在 Node.js 和浏览器端,我们可以使用 log_ 这个 npm 包来方便地进行日志打印管理。

    5 年前
  • npm 包 coffee-scrunch 使用教程

    前言 在前端开发中,我们常常需要编写大量的 JavaScript 代码。而在编码过程中,为确保代码易于维护和可读性高,我们会借助各种工具和库来辅助开发。本文将介绍一个名为 coffee-scrunch...

    5 年前
  • npm 包 coffee-middle 使用教程

    什么是 coffee-middle coffee-middle 是一款基于 Node.js 平台的中间件,它可以在前端项目中自动将 CoffeeScript 代码转换为 JavaScript 代码,使...

    5 年前
  • npm 包 express-messages 使用教程

    前言 在 web 应用中,消息提示是一个必要的功能,能够提升用户体验和交互性。但是,手动编写消息提示的功能是比较繁琐的,需要重复地写 HTML 和 CSS,而且每个页面都需要。

    5 年前
  • npm 包 coffee-box 使用教程

    前言 在前端开发中,我们经常需要使用一些 JavaScript 工具库来提高开发效率,而 npm 是目前最为流行的 JavaScript 包管理器之一。其中,coffee-box 是一个非常实用的 n...

    5 年前
  • npm 包 navigate 使用教程

    在现代 web 开发中,前端开发已经不再是简单的静态页面开发,而是包含大量动态交互、数据处理和业务逻辑的应用开发。为了提高开发效率,我们往往会使用各种工具和库来协助我们进行开发。

    5 年前
  • npm 包 socket.io-sessions 使用教程

    在本教程中,我们将学习如何使用 socket.io-sessions npm 包,它是一个可用于与 socket.io 集成的轻量级,易于使用的会话管理器。 安装 要安装这个包,我们使用 npm,打...

    5 年前
  • npm 包 express-expose 使用教程

    在前端开发中,使用 Node.js 和 Express 进行服务器端开发已经越来越常见了。而在 Express 的扩展包中,我们可以找到一个名为 express-expose 的 npm 包。

    5 年前
  • npm 包 `array.prototype.some` 使用教程

    在 JavaScript 中,数组是一种非常常见的数据结构。而对于这个数据结构的处理,array.prototype.some 是一种常用的方法。本文将会介绍 array.prototype.som...

    5 年前
  • npm 包 array.prototype.every 使用教程

    在 JavaScript 编程语言中,数组是一种十分常用的数据类型。在处理数组的过程中,我们经常需要对其元素进行依次遍历,并根据一些条件对其进行过滤、转换以及计算等操作。

    5 年前
  • npm 包 tape-dom 使用教程

    什么是 tape-dom tape-dom 是一个基于 tape.js 的 JavaScript 单元测试库,它可以在浏览器中运行,并且易于扩展和配置。tape-dom 是一个 npm 包,安装简单,...

    5 年前

相关推荐

    暂无文章