谷歌插件笔记02——现身吧,弹窗召唤术

·  阅读 43
谷歌插件笔记02——现身吧,弹窗召唤术

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情

相关简介

  • 前言 在认识谷歌插件后,知道了一些关于谷歌插件的基本知识。其中,不难发现清单文件manifest.json是比较重要的,插件的信息就是从这里配置的。其实,该文件的配置远远不止于此,接下来就来了解action(动作)和popup(弹窗)的配置。

  • 介绍 在action(动作)中可以配置插件的标题、图标以及弹窗等功能。配置好之后,使用鼠标左键点击插件就会显示出一个弹出界面,而这个popup(弹窗)其实就是一个html文件。

Action

了解大概后,配置弹窗前,首先得先配置好action(动作),接下来就完成一个简单的配置:

{
  "name": "HelloWorld",
  "version": "0.0.1",
  "description": "a demo plugin",
  "manifest_version": 3,
  "action": {
    "default_title": "popup title",
    "default_icon": {
      "16": "logo.png",
      "32": "logo.png",
      "48": "logo.png",
      "128": "logo.png"
    }
  }
}
复制代码

在完成以上配置后,点击图中位置,重新加载插件:

image.png

即可发现插件的图标和移上去的标题已经更改为下图了:

image.png

这里比较有疑问的是,为什么图标分为1632几个不等的值来配置呢?虽不太理解,但这是谷歌所推荐的,所以就照做了,原因如下:

图标大小图标作用
16x16扩展页面上的图标和上下文菜单图标
32x32Windows 计算机通常需要这种尺寸
48x48显示在分机管理页面
128x128在安装时和 Chrome 网上应用店中显示

Popup

实现弹窗

好了,简单了解了action(动作)之后,就可以配置popup(弹窗)了,接着在清单文件里面继续配置action项:

{
  "action": {
    "default_title": "popup title",
    "default_icon": {
      "16": "logo.png",
      "32": "logo.png",
      "48": "logo.png",
      "128": "logo.png"
    },
    "default_popup": "popup.html"
  }
}
复制代码

配置完成之后,在根目录新建popup.html文件,该文件就是弹窗显示的页面,并编写以下代码:

<body>
  <h2 style="width: 200px; text-align: center;">现身吧,弹窗召唤!</h2>
</body>
复制代码

完成以上操作后,使用鼠标左键点击插件即可看见下图:

image.png

简单扩展

弹窗页面的生命周期,是从显示开始,隐藏之后即销毁。并且,弹窗页面的窗口不能小于 25x25,也不能大于 800x600,所以需要合理的控制弹窗大小。

关于js的执行,需要新建一个js文件,然后通过script的方式引入,例如:

// 根目录新建popup.js文件
<script src="popup.js"></script>

// popup.js
console.log('popup')
复制代码

此时,点击图中下面「审查弹出元素」,如下图:

image.png

即可看到下面图中内容:

image.png

  • 弹窗里的游戏:剪刀石布 现在,弹出的页面还略显单薄,没什么内容。此时正好,就可以添加一些自己想要的内容,就比如下面要添加的「石头剪刀布」游戏。

游戏设计:

  1. 在页面里添加3个按钮,表示出招方式;
  2. 点击按钮即出招,电脑会随机出招,并打印胜负;
  3. 记录玩家和电脑的胜负信息。

游戏大概就是这3个功能,明确目标后,在htmlcss还有js的内力加持下,很容易就实现以下代码(内力不深,实现的或许不够好):

// popup.html
<div style="width: 160px;">
    <p>请您出招:</p>
    <button>剪刀</button>
    <button>石头</button>
    <button></button>
    <p class="result">尚未出招,未分胜负</p>
    <p class="info">
      胜利:0 </br>
      平局:0 </br>
      失败:0 </br>
    </p>
</div>
复制代码
// popup.js
const skill = ['剪刀', '石头', '布']
const resultType = ['平局', '你赢了', '你输了']
const resultEle = document.querySelector('.result')
const infoEle = document.querySelector('.info')
let win = 0, lose = 0, draw = 0
document.querySelectorAll('button').forEach((btn, idx) => {
  btn.addEventListener('click', () => {
    const rIdx = Math.floor(Math.random() * 3)
    const resultIdx = idx >= rIdx ? idx - rIdx : resultType.length + idx - rIdx
    resultIdx > 1 ? lose ++ : resultIdx > 0 ? win ++ : draw ++
    
    resultEle.innerHTML = `你出招${skill[idx]},电脑出招${skill[rIdx]}...<br />${resultType[resultIdx]}`
    infoEle.innerHTML = `胜利:${win} </br>平局:${draw} </br>失败:${lose} </br>`
  })
})
复制代码

完成代码的编写后,就可以看到下图内容了:

d01.gif

至此,就已经成功完成了一次弹窗召唤术了:)

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改