谷歌插件笔记02——现身吧，弹窗召唤术在认识谷歌插件后，知道了一些关于谷歌插件的基本知识。其中，不难发现清单文件是比较重

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

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"
    }
  }
}

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

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

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

图标大小	图标作用
16x16	扩展页面上的图标和上下文菜单图标
32x32	Windows 计算机通常需要这种尺寸
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>

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

简单扩展

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

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

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

// popup.js
console.log('popup')

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

即可看到下面图中内容：

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

游戏设计：

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

游戏大概就是这3个功能，明确目标后，在html和css还有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>`
  })
})

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

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

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

相关简介

Action

Popup

实现弹窗

简单扩展