JS脚本打包成一个 Chrome 扩展(CRX 插件)

受这篇博客 如何把CSDN的文章导出为PDF_csdn文章怎么导出-CSDN博客 启发,将 JavaScript 代码打包成一个 Chrome 扩展(CRX 插件)。

步骤:

1.创建必要的文件结构和文件

  • manifest.json
  • background.js
  • content.js

2.编写 manifest.json

{"manifest_version": 3,"name": "Print Article","version": "1.0","description": "A Chrome extension to format and print articles.","permissions": ["activeTab","scripting"],"background": {"service_worker": "background.js"},"action": {"default_icon": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"}}
}

3.编写 background.js: 

chrome.action.onClicked.addListener((tab) => {chrome.scripting.executeScript({target: {tabId: tab.id},files: ['content.js']});
});

4.编写 content.js(包含你的 JavaScript 代码):

(function(){      'use strict';var articleBox = $("div.article_content");articleBox.removeAttr("style");var head_str = "";       var foot_str = "";   var older = document.body.innerHTML;       var title = document.getElementsByClassName('article-title-box')[0].innerHTML; var main_body = document.getElementsByClassName('article_content')[0].innerHTML;document.body.innerHTML = head_str + title + main_body + foot_str;$("#mainBox").width("100%");document.getElementsByTagName('body')[0].style.zoom = 0.8;     window.print();document.body.innerHTML = older;return false;
})();

5.创建 popup.html(可选)

如果你希望在扩展图标点击时显示一个弹出窗口,你可以创建一个简单的 HTML 文件。否则,你可以忽略这个步骤。

6.创建 icons图标文件

提供扩展的图标文件,例如 icon16.png, icon48.png, icon128.png。

7.打包和加载扩展

  • 打开 Chrome 浏览器,进入 chrome://extensions/
  • 打开“开发者模式”。
  • 点击“加载已解压的扩展程序”。
  • 选择包含上述文件的文件夹。

完成上述步骤后, Chrome 扩展程序应该可以运行了。当你点击扩展图标时,它会执行 content.js 中的代码,格式化并打印文章。

8.结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/20279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring MVC 源码分析之 AbstractHandlerMethodAdapter#handle 方法

前言: 前面的篇章我们分析了 Spring MVC 工作流程中的 HandlerMapping、HandlerAdapter 的适配过程,以及拦截器的工作流程,本篇我们来分析正真处理业务请求的过程,也就是 ha.handle(processedRequest, response, mappedHandler.g…

【怀旧版】win10中从零开始创建vue2+ElementUI项目

技术栈 node22 vue2 cli2.9 webpack3.6 elementUI2 必读: https://u.rudon.cn/wgz5 > Vue简史https://u.rudon.cn/bvg0 > 使用 nvm 管理不同版本的 node 与 npmhttps://u.rudon.cn/ehn3 > nodejs和vue关系https://u.rudon.cn/qyb4 > vue的vite、v…

Java 应用部署与优化:简单介绍Java应用的部署策略,并讲解一些常用的Java应用性能优化技巧

I. Java 应用部署 A. 容器化部署 Docker 的简介及其优势 Docker是一种开源的容器化技术,它可以将应用及其依赖打包在一起作为一个可运行的独立单元进行运行。Docker的主要优势包括以下几点: 便携性:无论在哪种环境下,只要安装了Docker,就可以运行Docker容器。 一致性:…

ArcGIS教程(05):计算服务区和创建 OD 成本矩阵

准备视图 启动【ArcMap】->双击打开【Exercise05.mxd】->启用【Network Analyst 扩展模块】。前面的文章已经讲过,这里不再赘述。 创建服务区分析图层 1、在 Network Analyst 工具栏上,单击 【Network Analyst】,然后单击【新建服务…

解决安装 WP Super Cache 插件提示 Advanced-Cache.Php 是另一个插件创建的

昨天晚上一个站长求助明月,说是安装 WP Super Cache 插件的时候提示 advanced-cache.php 被占用了,无法完成安装,收到截图看了才明白原来提示的是“advanced-cache.php 文件,由另一个插件或者系统管理员创建的”,如下图…

社交媒体数据恢复:QQ空间

本教程将指导您如何恢复QQ空间中的说说、日志和照片等内容。请注意,本教程不涉及推荐任何数据恢复软件。 一、恢复QQ空间说说 登录您的QQ账号,并进入QQ空间。点击“日志”选项,进入空间日志页面。在空间日志页面,您会看到一个“…

go语言使用model Gorm MySQL查询数据 定时十分钟查询一次 查询十分钟前新建的数据

在Go语言中,使用GORM库与MySQL数据库交互并定时查询数据是常见的需求。以下是一个基本的示例,展示了如何设置定时任务,并使用GORM查询十分钟前新建的数据: 首先,你需要安装GORM和MySQL驱动: bash go get -…

Practicing Version Control

Part A 新建一个文件夹Git,然后进入文件夹: Windows: 在这个文件夹中右键 > Open Git Bash hereMac: 运行终端,打cd 空格,然后将文件夹拖入终端,按 return 从 Github 上复制 HTTPS,然后 git clone https://githu…

16-云原生监控体系-rabbitmq_exporter监控 RabbitMQ-[部署Dashborad告警规则实战]

文章目录 1. 二进制方式部署1.1. 二进制包下载和部署1.2. 配置1.2.1. 可用的环境变量1.2.2. 使用变量2. docker-compose 方式部署3. 配置到 Prometheus3. Metrics3.1. 全局3.2. 基础信息3.3. Queues3.3.1 Queues - Gauge3.3.2. Queues - Counter

Fish语言编程:探索一种全新的编程范式

Fish语言编程:探索一种全新的编程范式 在浩瀚的编程海洋中,Fish语言以其独特的魅力吸引着无数编程爱好者的目光。作为一种全新的编程范式,Fish语言以其简洁、直观和强大的特性,为编程世界带来了新的活力。本文将从四个方面、五个…

数据库(12)——DQL聚合查询

常见的聚合函数 将一列数据作为一个整体,进行纵向计算。 函数功能count统计数量max最大值min最小值avg平均值sum求和 语法 SELECT 聚合函数 (字段列表)FROM 表名; 示例 这是我们的原始表: 求人物总数 select count(id) from in…

2024-06-01 问AI: 在大语言模型中,什么是single agent?

文心一言 在大语言模型(LLM)的语境中,特别是在涉及多智能体(Multi-Agent)系统的讨论中,Single-Agent(单智能体)指的是整个系统中仅设计了一个智能体来负责处理工作流中的各个环节。…

“开源与闭源:AI大模型发展的未来之路“

文章目录 每日一句正能量前言数据隐私开源大模型与数据隐私闭源大模型与数据隐私数据隐私保护的共同考虑结论 商业应用开源大模型的商业应用优势:开源大模型的商业应用劣势:闭源大模型的商业应用优势:闭源大模型的商业应用劣势:商…

Navicat使用ssh隧道连接mysql数据库

转载请标明出处:http://blog.csdn.net/donkor_/article/details/139352748 文章目录 前言新建连接MySql,填写ssh隧道信息方式1:使用密码方式连接方式二:使用密钥方式连接 填写常规信息总结 前言 使用ssh隧道连接数据库,方便本机…

docker和虚拟机的异同

Docker 和虚拟机(Virtual Machine, VM)都是用于隔离和运行应用程序的技术,但它们在实现方式、性能和使用场景上有显著的差异。以下是它们的主要异同点: 相同点 隔离性:两者都提供隔离环境,确保应用程序运…

2024抖音流量认知课:掌握流量底层逻辑,明白应该选择什么赛道 (43节课)

课程下载:https://download.csdn.net/download/m0_66047725/89360865 更多资源下载:关注我。 课程目录 01序言:拍前请看.mp4 02抖音建模逻辑1.mp4 03抖音标签逻辑2.mp4 04抖音推流逻辑3.mp4 05抖音起号逻辑4.mp4 06养号的意义.mp4 0…

Linux 多台机器之间的免密登录设置

生成公钥私钥 ssh-keygen -t rsa 一路回车即可 将公钥发送给需要免密的机群 # 格式:ssh-copy-id -i ~/.ssh/id_rsa.pub 用户名机群地址 ssh-copy-id -i ~/.ssh/id_rsa.pub hadoop192.168.0.1

【经典排序算法】堆排序(精简版)

什么是堆排序: 堆排序(Heapsort)是指利用堆(完全二叉树)这种数据结构所设计的一种排序算法,它是选择排序的一种。需要注意的是排升序要建大堆,排降序建小堆。 堆排序排序的特性总结: 1. 堆排序使用堆来选数…

flink left join消费kafka数据

left join会产生回车流数据 在控制台数据 import com.sjfood.sjfood.gmallrealtime.app.BaseSQLAPP; import com.sjfood.sjfood.gmallrealtime.util.SQLUtil; import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apache.flink.table.…