chrome header 获取_使用Chrome插件来补充一些写作网站没有Markdown的坑

news/2024/5/8 10:21:23/文章来源:https://blog.csdn.net/weixin_33848436/article/details/112281402

场景

技术者写文章,基本少不了Markdown了,但是很多自媒体平台(大而全那种),往往都是坑爹的富文本编辑器(还很多是魔改UEditor,人家官方三年没更新了喂)。

小白学逻辑,内行看门道。

类似这种:

d0313735b5fcf03750cb593b3fae2e88.png

这是很麻烦的一件事,尤其是那些没有代码块的编辑器,没错,说的就是你,头条!这种坑爹玩意儿,就得让程序员手动粘贴代码过来,然后遇到排版不友好的,呵呵,对,说的还是你,头条! 于是吧,我就想着,奶奶个熊,没有我就自己写个插件来搞吧。

事实上,我自己的网站上有自己依赖marked做的一套编辑器,还挺好用,但是由于图床问题,还是得每次把富文本粘贴到头条后,删除图片,重新上传,没办法,穷是本命。 咳咳,最后做出来了,但是发现,没卵用……喵的,Markdown有代码块,人家富文本还是不支持啊……总之写出来分享下方案与思路。


框架

manifest.json 配置

6048ed1ceeb393ef65fbe38f729e632c.png

这要是看下content_scripts,这个说是scripts,你也可以看到,是可以塞一些css进去的,不过这里就看js。 util.js主要提供一个编辑时候使用的函数,作用是避免每次编辑触发input都转义Markdown2HTML,也就是debounce消抖了。

核心如下(附带throttle节流):

1331805122432e20d580d2c9209b7363.png

然后是turndown.js,这个是marked.js的反向。marked是把Markdown2HTML,那么turndown就是把HTML2Markdown了。这种东西当然是轮子了,安全好用(npm)。

至于content/index.js,就是核心页面插入的js(不是注入inject,这俩有差,这里不细说),就是document有了就运行的函数,一般都是document_start。这个等下结合插件的js说。

这个文件最后就是看popup.html,这个文件名随意区,作用是点击插件显示的那个小窗户,拿FeHelper看就是这样的:

101c74dfa691c125b2b6d48436fb6d5a.png

看下内容:

b512e330e0adcff8db40e928ebd00796.png

常规内容,长这样:

f334c01cf421d3b90ad26b8fb61557f5.png

就一个输入框和header,没了,监听这个输入框变化。

然后引入js,marked.js就不用说了,popup.js就是这个页面核心js了,下面细说。

到这里,功能页面与资源齐全了(不算icon什么的)。


逻辑

  1. 插件的页面输入内容要同步到网页的输入框里面,而且由于网页的输入框是富文本,所以得是Markdown2HTML化之后的HTML字符;
  2. 网页启动时候,由于content/index.js加载早于富文本生成,所以想办法获取到富文本的标签;
  3. 网页启动时候,如果有草稿,得把草稿内容HTML2Markdown给插件输入框;
  4. 基于3,得提示用户在传HTML2Markdown之前,打开popup页面(插件页面),不然传给鬼了(插件页面打开关闭都是重新运行页面)。

一共上面4个核心问题处理,这个简易版插件就完成了(虽然没什么卵用)。

问题1

popup.js

493978b77015b6adba76cdb63a0f3729.png

具体都是chrome插件的api,主要看逻辑即可。

问题2,3,4

content/index.js

ba9ba955615352ecfa6a0a6cd57efcff.png

没错,灵魂是哪个alert,YES!


效果

99aec6046087f34f9d3cb7839783f91e.gif

bug是有的,因为我也没去优化,反正也没用。而且头条这富文本标签挺奇葩的,得去魔改下marked.js才行。

主要是分享下逻辑,以及熟悉下chrome的api。

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

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

相关文章

qq申诉网站无法接到服务器,为什么我qq申诉不成功 - 卡饭网

qq申诉成功后怎么办qq申诉成功后怎么办 qq申诉成功后怎么办 1.在QQ申诉中,我们采用的方法有两种,一种是邮箱,一种是手机.邮箱申诉方式就会有一个链接发到你的邮箱,你进去点击打开就行.这里主要是讲手机接收的方式进行申诉,申诉成功后会收到下面的短信; 2.打开短信中的网址,输…

护卫神异地备份系统怎么传服务器,护卫神异地备份系统(网站异地备份工具)V2.8.2 官方版...

护卫神异地备份系统(网站异地备份工具)是一款非常优秀好用的专业网站异地备份软件。护卫神异地备份系统功能全面,操作简单,支持上传和下载模式,可以全自动备份重要数据,让网站数据更安全。可以实时或者定时帮助用户把数据传到远程…

中小公司网站架构

基于阿里云平台,部署中小型网站架构,如下图 转载于:https://www.cnblogs.com/xuegqcto/p/7519859.html

rfq在计算机那种代表什么,阿里网站专业术语中rfq是什么意思

阿里国际站rfq是客户主动发布的采购需求。买家主动发布采购需求,供应商自主选择挑选合适的买家进行报价。随着平台规则更新,以及平台对于RFQ这一块资源的重视度越来高,RFQ的使用不仅影响平台的RFQ资源的奖励额度,同时直接影响到店…

销售易 服务器错误的是什么,急,打开“深圳市市场监督管理局网站”出现服务器错误,请问是我电脑问题还是该网站问题,如何解决?谢谢...

急,打开“深圳市市场监督管理局网站”出现服务器错误,请问是我电脑问题还是该网站问题,如何解决?谢谢0zhuwq8862014.06.04浏览147次分享举报“/OutSide.WebUI”应用程序中的服务器错误。 ---------------------------------------…

squid正反向代理-加快网站访问速度

配置squid代理服务器加快网站访问速度 一:squid服务概述 Squid cache(简称为Squid)是一个流行的自由软件(GNU通用公共许可证)的代理服务器和Web缓存服务器。Squid有广泛的用途,从作为网页服务器的前置cache…

JavaScript练习网站收集

在学习的过程中会发现很多知识点如果不在工作中运用或者手写带验证的话,很容易忘记。任何技能的掌握都是需要不断练习的。在此收集一些自己遇到的JavaScript练习的网站。 codewars 国外的一个练习网站,有JavaScript,也有Python,每…

更改浏览器网站图标与标头(普通网站和el-admin)

还记得第一次更改图标和标头,还是学习htmlcss写作品(静态网页)的时候。 1.简单静态网页 只需要一个title标签和link引入。 注意:这种引入图标的写法,仅对当前页面生效 2.el-admin修改 先找到public文件夹下的inde…

常见负面SEO方法,你应该知道的事?

由于百度算法的不断调整,并且开始严厉打击作弊行为,一些搜索引擎优化公司面临竞争对手的压力,经常采用一些不正当的手法。 入侵竞争对手的网站,并采用一些非常规的手段,使得让你的网站看起来,变的有一些不一…

第32篇 网站试题生成word下载时bug解决

问题描述:英语科下载word时,选的题型有:完形填空和词汇运用两种,但下载出来题的序号排序混乱。 1 完形填空序号混乱解决 网站上生成的如下: 而我生成的word如下: 原因在于:正则表达式出了问题…

(转)3个常用基于Linux系统命令行WEB网站浏览工具(w3m/Links/Lynx)

一般我们常用的浏览器肯定是基于可视化界面的图文结合的浏览界面效果,比如FireFox、Chrome、Opera等等,但是有些时候折腾和项目 的需要,在Linux环境中需要查看某个页面的文字字符,我们需要简单的浏览网页页面,但是也不…

Docker启动nginx容器--搭建网站

1.下载nginx镜像 docker pull nginx 2.启动nginx镜像 docker run -d --name nginx01 -p 80:80 -v /data/nginx/www:/usr/share/nginx/html -v /data/nginx/log:/var/log/nginx nginx -d 后台运行方式-name 给容器起别名-p 宿主机和容器端口映射 3.进入到容器中 docker e…

K8S集群使用Ingress实现网站入口动静分离实践

今年3月份在公司的内部k8s培训会上,和研发同事详细探讨了应用部署容器化部署的几个问题,问题简要如下: 1、java应用容器化部署首先通过自动化部署工具编译出全量的war包,将war包直接编译到docker镜像后推送到私用仓库并版本化控制…

网站多次切换服务器ip,站群多ip服务器怎么切换ip?

租多ip服务器的主要目的是,有时候用服务器采集别处的内容被封了IP,我们就经常碰到。这时候我们就要换服务器主IP才可以继续采集,下面跟大家讲下多ip服务器怎么切换ip的方法,这个方法只对多IP的服务器有效,只有一个IP的…

wordpress windows安装_本地搭建WordPress外贸网站教程

如果你还是个小白,想学习外贸建站技术,无奈还不懂域名和服务器知识,那么在本地搭建WordPress网站是再好不过的选择了,不需要任何经济上的成本,是学习建站的很好的选择,那么怎么在本地搭建WordPress网站呢&a…

sqlserver项目案例c语言,浅谈《基于PHP的动态网站开发》课程的项目案例设计原稿(图文高清版)...

浅谈《基于PHP的动态网站开发》课程的项目案例设计(原稿)1、语言MySQL数据库技术及PHP操作MySQL数据库后端网站编程技术等内容。以案例为主线,学习掌握和运用所涉及的知识点,根据知识点的常用性和关键性端课程的学生教学背景基于PHP的动态网站开发课程,教学课时学时。前导课程网…

浅谈|营销型网站建设的优势特征

营销型网站建设主要特征是以展示宣传企业的品牌及产品为主,网站通过对企业信息的进行系统宣传,让有需求的浏览者熟悉企业的所提供的产品及服务,并通过有效的在线交流沟通方式搭建起潜在客户与企业之间的桥梁。 通过营销型网站宣传自已的产品及…

linux运维面板_宝塔Linux面板一键迁移功能实现网站快速搬家教程

宝塔面板对于广大不精通linux运维的站长来说绝对是一大神器,无论是系统运维还是网站搭建都非常的易于上手。而且面板还有一个“一键迁移”的功能,之前一直都是内测功能,近期随着宝塔版本更新正式上线了。刚好飞鸟这边有个网站需要搬家&#x…

bootstrap网站后台从设计到开发

前言 毕业后在一家小公司找的工作是做前端,小公司必须要身兼多职,会多门技术,所以为了工作需要自学ps,做过微信运营,后来为了做erp管理系统,又开始学习c# ,之后公司有新项目要用wpf ,我又开始学习wpf。感觉自己工作这三年虽然学了…

找到一个在线网站截图的网站

因为业务的关系,需要定期查看一些网站和微博,之前只能每天定期访问这些网站,非常的麻烦,还经常忘记,也用过一些截屏工具,也不是很方便,还是要手动的操作。后来找到一个非常好用的网站 http://ww…