六虎

关于chrome拓展开发的实践与思考(二)

关于chrome拓展开发的实践与思考(二)

作者：

四次元口袋

在

本文已参与「新人创造礼」活动，一起敞开创造之路。

前语：

上文中，咱们现已基于最小的功用完结了chrome拓宽插件。接下来咱们再为这个插件添加点更复杂的功用。

实践：

如图，咱们想完结该功用，放置一个button，点击后数字0开端自动加一

关于chrome拓展开发的实践与思考(二)

html文件：

<!DOCTYPE html>
<html>
​
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="styles/popup.css" />
</head>
​
<body>
 <main class="popup-main">
  <div class="popup-avatar">
   <img class="popup-image" src="image/avatar.png" alt="">
  </div>
  <div class="popup-information">
   <p class="popup-text">0</p>
   <button class="popup-button" id="popup-button">点击后数量加一</button>
  </div>
 </main>
 <script type="text/javascript" src="js/popup.js"></script>
</body>
​
</html>

js文件：

let number = 0
function clickMyButton(){
 number++
 const popupButton = document.querySelector(".popup-text")
 popupButton.innerHTML = number
 console.log('我数量加了1')
}
​
document.getElementById("popup-button").addEventListener("click", clickMyButton);

tips:

  1. 关于js代码，需要以引进的方式注入，假如直接以script标签包裹js放置到html文件中，会无法运行。感兴趣的能够自己测验一下。
  2. 关于事情绑定，给button标签直接加onclick事情绑定函数也无法正常运行，需要用addEventListener的方式绑定。

完结以上过程后，咱们更新拓宽，并单击右键挑选检查将拓宽的控制台翻开，屡次点击按钮，发现数量每次加一，并在控制台出现了打印信息。再次重申，该控制台非按下F12出现的控制台，而是右键单击你的拓宽插件在【检查】选项中出现的控制台。

关于chrome拓展开发的实践与思考(二)

    假如你细心调查，你会发现每次拓宽封闭重启后(指再次点击右上角拓宽icon)，数字总是回到了0，而且你的拓宽控制台也消失掉了。这便是笔者要引进的下一个内容，生命周期与background.js。

生命周期： 拓宽弹出的界面的完整周期只要它展现在界面的那段时刻(有点废话)，也便是说，拓宽在封闭从头翻开后，它的函数也跟着从头改写，页面也从头渲染，这也便是从头翻开后数字变回了0以及控制台自动消失的原因，关于这点你也能够类比咱们的chrome浏览器。当浏览器封闭时，控制台也会随之消失。那有没有即便插件封闭了，数字依旧不归0的方法？有的，background.js。

background.js: 你能够理解为会一向常驻的后台JS或后台页面，它的生命周期与拓宽的【default_popup】(即拓宽弹出页面)不同，只要当浏览器彻底封闭时，它的生命周期才会结束，咱们能够使用该特性完结咱们的需求。

manifest：

{
 "manifest_version": 2,
 "name": "FxExtensions",
 "description": "it is a description",
 "version": "1.0",
 "icons": {
  "16":"image/icon.png",
  "48":"image/icon.png",
  "128":"image/icon.png"
  },
 "browser_action": {
  "default_icon": "image/icon.png",
  "default_popup": "popup.html",
  "default_title": "鼠标悬浮展现内容"
  },
 "background": {
  "scripts": ["js/background.js"]//留意引证途径
  }
}

在background.js中，写入

var a=0

在popup.js中，写入

//chrome供给的api，该api功用为获取background.js的window
const bg = chrome.extension.getBackgroundPage();
// 点击事情
function clickMyButton() {
 console.log(bg)
 const popupButton = document.querySelector(".popup-text")
 bg.a = bg.a + 1
 popupButton.innerHTML = bg.a
}
document.getElementById("popup-button").addEventListener("click", clickMyButton);

tips: 笔者在函数中的console.log(bg)并非毫无意识，感兴趣的能够在控制台查看这个【bg】到底是何内容，打印后会发现是window对象，而且咱们的a变量也在其间。

关于chrome拓展开发的实践与思考(二)

无妨再将background.js的var替换成let，再次打印查看window。

关于chrome拓展开发的实践与思考(二)

你会发现window下并没有a变量。当然这是顶层对象和全局变量的常识，与本内容并无太大联系。笔者只是想提示读者留意变量声明方式避免出现无法获取到变量的初级过错。

至此，咱们的功用现已完结，无妨来试一试看看是否成功。咱们点击按钮将数量变为3，随后改写浏览器页面，再次翻开拓宽，发现数字还是0，但只点击一次按钮，会发现数字直接变成了4，这是由于咱们是在html文件中给p标签内容填充为0，点击按钮时才会将a的值赋给p标签，这也从旁边面验证了html文件的生命周期background.js的生命周期是不同的。封闭浏览器再次翻开，会发现全部回到了起点，数字又从1开端进行了，这也验证了background的生命周期。

更多文章