给博客园编辑器完善个插件及简单产品化工作

我的需求是这样的,平时使用有道来写笔记(分享方便 ),同时如果有些文章觉得比较适合公开的话会考虑放到博客园进行分享。尝试了找了一些方法发现能在浏览器里拷贝有道的文章并粘贴到博客园的编辑器里。但这种方法对于图片有个缺陷就是文章里的图片是使用有道的链接,我不想因为有道链接可能失效从而影响我整篇文章的阅读。

但是翻遍了互联网也没找到方便的自动上传的工具(有些可能因为写的比较早不能匹配现在的插件或域名了),所以只能自己开发来解决了。好在程序员有个习惯就是分享源码,于是打算在 https://github.com/skayzhang/cnblogs-PicPlugin 的基础上修改来解决。当然之前没有写过Chrome插件得重新学,用了两个半天的时间完善插件并发布到Chrome应用市场方便后续其他人员使用。同时分享Chrome插件从开发开发布。

插件信息

简介

将编辑器中的外链图片自动上传到博客园中,支持Markdown和TinyMCE编辑器。

Chrome 插件市场地址

https://chrome.google.com/webstore/detail/cnblogs-remote-image-uplo/mnpinmcpoapihjgphgdadakmibpdljlo

百度网盘下载地址

https://pan.baidu.com/s/1X_iqLQhWuDTlfQPfk_bdvg

Chrome市场截图

使用截图

Chrome插件从开发

基础

Chrome 插件开发基础介绍: https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

源码文件结构

  • manifest.json,用来配置所有和插件相关的配置,必须放在根目录
  • content-scripts.js,实现通过配置的方式轻松向指定页面注入JS和CSS
  • background.js ,几乎可以调用所有的Chrome扩展API(除了devtools),而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS

建议直接下载一个框架或现成的代码来进行开发调试

插件调试

加载插件

在Chrome的插件管理中直接加载一个未打包的插件(打开插件的源码目录)。如果脚本更新请直接点击插件页面的刷新图标而不是点那个Update...

content-Scripts.js的调试

默认情况下打开开发者工具的源码选项里是当页面的文档系统,因此需要点击右边的箭头打开Content Scripts。再打到你的插件打开源码进行断点调试。

background.js的调试

background.js的调试是打开插件详情,点击background page的链接,在弹出的窗口中可断点调试

发布到应用市场

注册开发者

打开Chrome应用商店,在配置菜单中打开开发者中心,需要缴纳5美元的验证费用之后即时开通。

上传和发布应用包

开发者账户开通后点击添加新内容,按要求上传源码的ZIP文件及截图,介绍等信息

提交之后可能有一个审核时间,大概2天左右即可看到已发布的插件。

总结

Chrome 插件的开发并不复杂,在这里主要是想讲一个思维。程序员很多会写或者分享一些功能或代码,但却很少有人会把它做成产品或宣传。而作为一个使用者来说还是太复杂,我自己也花一天时间来找但是没有找到合适的。以上我做的工作其实主要就是把前人分享的代码再产品化的过程,让需要使用的人可以非常简单的通过点击几步就能使用。同时写这篇文章也是宣传的过程让更多的人知道并且使用。这个可能就是很多开发做产品化最后失败的原因,就是没有做到产品和市场。而这些工作与代码开发比起来一样重要。

还是感谢分享代码的同学,需要使用的可直接到Chrome插件市场下载,并希望能给予5星好评 :) ,关于产品化的工作欢迎留言评论。

原文地址:https://www.cnblogs.com/cbcye/p/11666240.html

时间: 2024-09-29 18:03:08

给博客园编辑器完善个插件及简单产品化工作的相关文章

仿博客园编辑器的插入代码 代码高亮功能

代码下载地址:http://download.csdn.net/detail/dfg727/7616305 1. a.配置tinymce,增加一个insert code按钮    b.处理显示页面中展开收缩的高亮部分事件 var tinymce_config = function (selector) { tinymce.init({ selector: selector, theme: "modern", menubar: false, plugins: [ "previe

博客园侧边栏美化及插件

博客园侧边栏美化及插件 1.vp计数 http://www.amazingcounters.com 2.来源地图 http://clustrmaps.com 原文地址:https://www.cnblogs.com/niuli1987/p/10306530.html

第一次来博客园先用jquery写一个简单菜单收缩效果

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <script src="jquery-1.7.2.min.js"></script&g

试用博客园编辑器

1 # guess LuckyNum 2 # 练习使用if_else语句 3 # 使用循环语句while 4 # 与.或.非 and.or.not 5 6 MyLuckNum = 66 7 NumInput = 0 8 GuessCount = 5 9 # while True: 10 while MyLuckNum != NumInput and GuessCount != 0: 11 NumInput = int(input("Please input number (0~100):&quo

博客园编辑器切换的一个问题

刚刚写的一篇文章是用markdown编辑器写的,里面有代码,格式不太好看,想切换为默认的TinyMCE编辑器 重新再编辑一下,然鹅等我把默认编辑器设为tinymce,重新编辑的时候,发现编辑器还是原来的markdown编辑器, 这就尴尬了,没有生效,我想是缓存来着,又等了几分钟,发现还是不行. 抱着试一试的态度我添加了一个新随笔,神奇的事情发生了,出现我想要的tinymce编辑器,写到这想着大伙应该明白了, 博客园保存文章的时候应该是还保存了这篇文章对应的编辑器类型,重新编辑器文章的时候还是会用

博客园添加网站统计访问量-操作简单很实用哦!

浏览博客园,看到这个小文章,跟着操作了一下,可以定制网站的访问人数.访问量,需要的亲果断试试看吧! 效果图: 博文: 无意中看到有这个访问量的统计,觉得挺好玩的,我们现在就来添加一个吧: 1. 先到http://www.amazingcounters.com/sign-up.php   这个地址去申请一个帐户,申请时填写好自己的资料,比如 你的统计风格样式.要统计的地址.要统计的类型,是浏览量(PV) 还是 访客数(UV),或者你也可以2个都统计:这些统计数据都是可以任意修改的哟,不过我们最好还

使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结

[超详细教程]使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结 去年就知道有这个功能,不过没去深究总结过,最近有写网络博客的欲望了,于是又重新拾起这玩意儿. 具体到底是用Windows Live Writer 2012还是用Word 2013,个人觉得看个人,因为这2个软件各有优点,各有缺点. 1.首先用LiveWriter发博客显然更专业,发布后的效果也与本地最接近,但是在编辑功能上肯定大不如Word,另外一个最大缺点是它本地保存

【超详细教程】使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结

去年就知道有这个功能,不过没去深究总结过,最近有写网络博客的欲望了,于是又重新拾起这玩意儿. 具体到底是用Windows Live Writer 2012还是用Word 2013,个人觉得看个人,因为这2个软件各有优点,各有缺点. 1.首先用LiveWriter发博客显然更专业,发布后的效果也与本地最接近,但是在编辑功能上肯定大不如Word,另外一个最大缺点是它本地保存的格式不是doc. 2.而Word的优点不言而喻,我们天天用Word,用Word就能发博客这简直就是一个天大的好消息,但用Wor

[转]使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结

去年就知道有这个功能,不过没去深究总结过,最近有写网络博客的欲望了,于是又重新拾起这玩意儿. 具体到底是用Windows Live Writer 2012还是用Word 2013,个人觉得看个人,因为这2个软件各有优点,各有缺点. 1.首先用LiveWriter发博客显然更专业,发布后的效果也与本地最接近,但是在编辑功能上肯定大不如Word,另外一个最大缺点是它本地保存的格式不是doc. 2.而Word的优点不言而喻,我们天天用Word,用Word就能发博客这简直就是一个天大的好消息,但用Wor