简单做了个黑客派社区浏览器扩展

本贴最后更新于 486 天前,其中的信息可能已经时过境迁

Browser extension for Hacpai,优雅便捷的黑客派社区插件

忙里偷闲。之前研究 pwa,就想了解下 chrome 扩展的开发。终于偷出时间看了,也算是完成了一个 TODO。

功能

主要是为了了解下浏览器扩展的开发,就先简单弄了几个功能。后面有空(大概是假的)再弄些功能吧。

源码

https://github.com/ghostsf/HacpaiExtension

有想弄的功能可以提出来(虽然通知,快捷键,社区功能都有了 😂 ),欢迎 PR。trollface

Chrome 扩展开发

总体而言,Chrome 扩展开发还是挺简单的,文档也很全面。基本没啥好讲的。

文档链接:

https://developer.chrome.com/extensions/getstarted

https://developer.chrome.com/extensions/api_index

当然开发过程中,也遇到一些槽点,懒得吐了。有空再多研究研究吧,= =。

chrome 扩展提供的展现形式,功能接口,工具类都很丰富。感觉可以干很多事情(怪不得很多扩展审核被拒 😂 )。

就是要注册 Chrome 网上应用店开发者,然后要支付 $5。

image.png

后面我还是要发布其他扩展或者应用(可以发布 20 项内容),就注册个吧。

注册还要 VISA 卡,然后审核,隐私申明....

虽然有卡,但是不在身边,也懒得弄。有妙招的,可以协助下 😂 。

开发轶事

想弄一个黑客派社区的 logo,就在 https://hacpai.com/article/1563882928300 这篇帖子里拿了下 logo,结果发现像素好低,ps 折腾半天也没法拯救。然后想想不对啊,怎么会连个 svg 的 logo 都没呢???

然后我发现左上角的 logo 不就是 svg 的吗?😂 不知道当时咋想的。然后用 svg 整了几个 png 图标。

<svg viewBox="0 0 32 32">
    <path fill="#d23f31" d="M5.787 17.226h17.033l5.954 9.528c0.47 0.752 0.003 1.361-1.042 1.361h-15.141z"></path>
    <path d="M10.74 3.927h17.033c1.045 0 1.512 0.609 1.042 1.361l-5.954 9.528h-19.872l6.379-10.209c0.235-0.376 0.849-0.681 1.372-0.681z"></path>
    <path d="M2.953 17.226h2.839l6.804 10.889h-1.892c-0.523 0-1.137-0.305-1.372-0.681z"></path>
</svg>

后来用 chrome.browserAction.setIcon 发现图标尺寸是有限制的,😳 。好吧,做了个 38*38 的才可以。

感觉我不是来研究 chrome 扩展开发的,是来研究黑客派 logo 的。

@88250 @Vanessa

发帖,咋不弄个草稿功能 😳

打赏 6 积分后可见
6 积分 • 5 打赏
  • 黑客派

    黑客派是 B3log 开源社区的线上论坛,这里主要汇聚了程序员和设计师。HacPai 分别取 Hacker / Painter 的头三个字母组成,源自《黑客与画家》。

    361 引用 • 4926 回帖 • 506 关注
  • 插件
    54 引用 • 204 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    135 引用 • 820 回帖

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 88250
    订阅者

    首先感谢你花时间精力进行开发,其次我有些想说的:

    1. B3log 相关 logo 可以在这里找到
    2. 签到几天前已经调整为:只要登录后访问任何页面就会自动签到,节省大家时间
    3. 看帖子时按 t 就可以返回顶部了,更多快捷键支持请看这里
    4. 草稿功能可以用浏览器本地存储,编辑器自动会保存的;如果要离线的话用链滴笔记

    感谢感谢 ❤️

    1 回复
  • 其他回帖
  • adlered 1
    捐赠者

    我以为打赏区是 Chrome 商店的下载地址......

    1 回复
  • ghostsf
    捐赠者 作者

    哦哦 可以 回头把设置页面弄下

  • adlered 1
    捐赠者

    安装上了。消息提醒只要 Chrome 打开就会有哈?

    1 回复
  • 查看全部回帖