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

至此，第一次開發插件及安裝測試完成。
下篇，接着說第二次開發的過程雜記。