chrome插件开发记录（一）

都是触摸屏搞出来的事！
触摸屏一旦全屏模式启动之后，页面上没有一切操作按钮，屏幕键盘也被隐藏，被后插鼠标键盘的窗口也被锁上，这个时候应用千万不要新开浏览器tab打开新页面，否则就面临进入新页面之后无法返回旧页面的尴尬！
偏偏这次的触摸屏应用里面，满是各种外链各种target=_blank，甲方就是要用户方便，看完我的站点还可以看其他人的站点，就这么大方！完了测试跑过来开心的说：嗨大哥，你这页面没法返回呀！
为了解决这个问题，我们开始操起了卖白粉的心，怎么办？思来想去，估计只有整一个浏览器插件，让这个插件显示一个返回按钮，点击按钮关闭当前页面这样子了。于是开始学习插件开发。

主要参考 小茗同学的博客，可以说很详细了 https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

于是让触摸屏本来的应用之外的所有站点的页面上都出现一个返回按钮，主要代码如下：

function closeThisTab() {
          window.opener = null;
          window.open('', '_self');
          window.close();
}
    
document.addEventListener('DOMContentLoaded', function () {
	var url = location.href;
	if (url.indexOf('xxx.com') != -1 || url.indexOf('dddd.com') != -1) {
	    return false;
	}
	
	var closeTabDIV = document.createElement("div");
	var divStyle = "box-shadow:1px 1px 3px #292929;font-size:30px;line-height:80px;width:300px;height:80px;" +
	    "color:white;background-color:red;position: fixed;right: 1%;top: 10px;_position: absolute;_top: " +
	    "expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight - 10+'px');  " +
	    "display: block;z-index:9999999;border-radius:5px;text-align:center;opacity:0.8;";
	closeTabDIV.setAttribute("style", divStyle);
	closeTabDIV.setAttribute("class", 'chrome-plugin-xxx-close-tab-botton-class');
	closeTabDIV.setAttribute("id", 'chrome-plugin-xxx-close-tab-botton-id');
	closeTabDIV.innerHTML = "<a href='javascript:void(0);' onclick='closeThisTab()' style='font-size: 30px !important;color:white;text-decoration:none;'>点此返回上一页</a>";
	document.body.appendChild(closeTabDIV);
});

最后出来的效果，嗯。。。

这里出现第一个问题，点击按钮提示

closeThisTab is not defined!

于是改用事件监听方式解决：

closeTabDIV.addEventListener('click', function () {
    closeThisTab();
});

然后出现第二个问题，无法关闭当前浏览器窗口！
百度一下全都在说新开一个子窗口然后关闭窗口云云，不对题，找到了这些些方法：

window.opener = null;
window.close();

window.opener=null;
window.open(’’,’_self’);
window.close();

最后发现第二种方式能够成功关闭页面中外链打开的新页面，也就是在新开的页面中，通过a标签打开的这种新页面可以关闭，而手动打开的浏览器页面无法关闭，好，这也符合我的需求，可以用。

最后打包安装，由于只是采购的这一批设备需要安装该插件，所以直接采用开发者模式安装本地已解压插件，但是运行几分钟之后，浏览器始终会有各种提示弹出来：

这客户要是点了个停用那就完了！
于是又想办法安装chrome的离线插件包，可恼的是70版本的chrome已经取消了离线安装的安装方式，只允许在Chrome应用商店安装插件，相当不顾及墙内的万千民众的感受。
没办法，找到一款chrome插件伴侣，完美解决问题，大大的感谢：https://blog.csdn.net/qq_42690685/article/details/81039700

至此，第一次开发插件及安装测试完成。
下篇，接着说第二次开发的过程杂记。