谷歌插件开发踩坑2.0

为什么会有这篇文章，因为上篇文章谷歌插件开发踩坑中提到的功能涉及的页面更新了，所以我不得不更新我的插件代码，于是乎，爬坑开始。

因为还是在popup和content之间通信，所以原来选择的长连接的方式我并没有改变，然后就是更新了一下我的popup.html文件中的样式代码。 这个时候神奇事情发生了。 没错 我还是按照之前的流程 点击了提交按钮 看到了如下报错

看报错好像是连接的一个错误，通过查阅各种资料，都没办法解决我这个问题，于是我只有采用另一种方式进行通信了，没错就是直接发消息 如下

结果不出意外！

困扰了我许久，我在想这到底为什么，我把插件关了重试，必须要删了重新引入这个报错才会消失，这也太麻烦了吧，我记得当初第一版开发也没这么麻烦啊，我每次改动代码，都需要重新加载，那成本太大了。

其实你更新完代码，刷新一下插件，打开新窗口就没什么问题了。真是坑啊

这次还用到了谷歌插件的storage功能，代码如下

// 这是设置key
chrome.storage.local.set({
    lastEditedData: {
      keyName1: keyName1,
      value1: value1,
      keyName2: keyName2,
      value2: value2,
      keyName3: keyName3,
      value3: value3,
      autofocus: checkbtn,
    },
  });
  
// 获取key
chrome.storage.local.get(["lastEditedData"], function (result) {
  let lastEditedData = result.lastEditedData;
  if (lastEditedData && lastEditedData.autofocus) {
    setValue(lastEditedData)
    autofocus()
  } else {
    setValue(lastEditedData)
  }
});

popup.js与content.js之间消息通信

// popup.js
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, { action: "get-element-value" }, function(response) {
    document.getElementById("my-textbox").value = response.value;
  });
});

// content script
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "get-element-value") {
    var element = document.getElementById("my-element");
    sendResponse({ value: element.value });
  }
});

再次记录下来，防止今后遇到同样的问题不会再犯！