文库网
关注排行榜

当前无数据...

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

每个使用谷歌浏览器的人都会留一些称心如意的插件,那你们知道怎么做插件吗?


话不多说,开始教程

首先先大致看一下插件的目录:

{tilte}-怀念家驹

  • 1.background.js:
  • 2.index.js:打开某一个网站时调用的js程序。
  • 3.manifest.json(主要文件):扩展程序所查看的配置文件。
  • 4.music.html:点击插件后弹出的窗口框。
  • 5.music.png:插件ico图标。

以上文件,除了manifest.json为必需文件之外,其他均自行调整。本例子为洛雪音乐助手初期文件,当作模板介绍。


首先查看关键文件manifest.json:

  1. <code class="prism language-shell">{
  2. "manifest_version": 2, # manifest版本号
  3. "name": "洛雪音乐助手", # 插件署名
  4. "version": "0.0.1", # 插件版本号
  5. "description": "洛雪音乐助手:随时随地一键下载音乐", # 插件介绍
  6. "author": "Lux", # 作者署名
  7. "content_scripts": [
  8. {
  9. # 选择url场景调用,<all_urls>为全部url网址。
  10. "matches": [ "https://music.163.com/*" ],
  11. # 以上url中调用本地js模块
  12. "js": [ "index.js" ]
  13. }
  14. ],
  15. "browser_action": {
  16. "default_icon": "music.png", # 浏览器右上角插件ico
  17. "default_popup": "music.html" # 点击插件后界面显示
  18. },
  19. "icons": {
  20. "16": "music.png", # 扩展程序中ico图标,默认16*16
  21. "32": "music.png", # 扩展程序中ico图标,默认32*32
  22. "128": "music.png" # 扩展程序中ico图标,默认128*128
  23. },
  24. "background": {
  25. # 扩展启动时自动创建一个包含所有指定脚本的页面
  26. "scripts": [ "background.js" ],
  27. # Chrome会将指定的HTML文件作为后台页面运行
  28. "page": [ "" ],
  29. # 定义了常驻后台的方式,默认为true
  30. "persistent": false
  31. }
  32. }
  33. </code>
复制代码

index.js文件为进入网易云音乐网页以及子网页后调用的JavaScript代码文件:

  1. <code class="prism language-shell">alert("别忘了你还有个网易云音乐插件哦~");
  2. </code>
复制代码

点击插件图标后会显示music.html文件界面:

  1. <code class="prism language-html"><!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>translation</title>
  7. <style>
  8. *{
  9. margin:0;
  10. padding:0;
  11. }
  12. span.name {
  13. white-space: nowrap;
  14. color: lightpink;
  15. font-size: 10px;
  16. padding: 5px;
  17. background: linear-gradient(to right,red,purple);
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <span class="name">洛雪音乐助手 v0.0.1</span>
  23. <div class="music">
  24. </div>
  25. </body>
  26. </html>
  27. </code>
复制代码

之后给上我的music.png图标,就完成了初步的谷歌插件配置。

{tilte}-怀念家驹


接下来。我们就可以上传自己做的谷歌插件到谷歌浏览器中查看样式了!

  1. 首先进入chrome://extensions/网址
  2. 打开开发者模式:
    {tilte}-怀念家驹
  3. 加载已解压的扩展程序:
    {tilte}-怀念家驹
  4. 将我们制作的项目文件夹导入到加载框里。
  5. 找到我们做的程序图标,就已经导入进来了:
    {tilte}-怀念家驹
  6. 响当当的欢迎界面:
    {tilte}-怀念家驹
  7. 点击插件后还有我们的插件界面可以看到哦~
    {tilte}-怀念家驹

一步制作crx:

在刚才导入按钮旁边有一个打包扩展程序:

{tilte}-怀念家驹

点击后放入自己的项目文件夹。
方可打包成功。
文件夹目录下生成{{洛雪音乐助手.pem}}以及{{洛雪音乐助手.crx}}俩文件。
分享出去方可直接将crx给自己的朋友们即可使用你的扩展程序包了。


发布谷歌插件库中:

以下链接为发布的步骤:
https://developer.chrome.com/webstore/publish
(似乎第一次发布需要花费¥5,太贵了我就没正式发布)
(注意是5美金哦~ ~ ~)


最后还是希望你们能给我点一波小小的关注。

奉上自己诚挚的爱心
本站资源均由网上搜集或网友上传提供,内容仅供观摩学习交流之用,本站将不对任何资源负法律责任.如有侵犯您的版权,请及时联系我们(邮箱:892481490@qq.com,客服QQ:892481490),我们会尽快处理!QQ350550790是骗子,注意不要和他交易!!!

发帖求助前要善用【论坛搜索】功能, 那里可能会有你要找的答案,也能为你节约不少学习时间;
如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加(威望)和(贡献)而不会扣除自己的积分。
如发现灌水帖、病毒木马帖、广告帖、工具不能正常使用、网盘链接失效,请点击【举报】 核实有几率会给予额外的B币奖励哦!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    发布资源 快速回复 返回列表 客服中心 官方QQ群

    QQ|小黑屋|手机版|编程之家论坛 ( 桂ICP备18002029号 )

    Powered by 编程之家  © 20019-2021