chrome外掛開發——訂單號環境切換

gary-liu發表於2017-11-05
Chrome

只是為了記錄，寫的有點簡略，chrome外掛的開發具體可以看參考文獻中的chrome開發中文文件。

問題

工作中總是要根據訂單號查詢不同環境（比如日常和線上）的訂單詳情，所以希望根據訂單號，選擇不同環境的按鈕跳到不同環境的詳情頁

效果

見下圖
這裡寫圖片描述

程式碼

只列出幾個重要檔案的程式碼，完整程式碼見 github

manifest.json

{
    "manifest_version": 2,
    "name": "訂單詳情頁",
    "version": "1.0",
    "description": "訂單號跳轉到詳情頁",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "browser_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "訂單號",
        "default_popup": "popup.html"
    }
}

popup.html

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    width: 200px;
    height: 100px;
}

div {
    line-height: 50px;
    text-align: center;
}
#daily_button{
  margin-right: 20px;
}
a{
  font-size: 10px;
}
</style>
</head>
<body>
<div id="clock_div"></div>
<div id="tid_div">
  <a>orderNo:</a><input id="tid" type="text" name="tid" />
  <button id="daily_button" type="button">daily</button>
  <button id="online_button" type="button">online</button>
</div>
<script src="js/order_detail.js"></script>
</body>
</html>

order_detail.js

function $(id) {
  return document.getElementById(id);
}

function my_clock(el){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    m=m>=10?m:('0'+m);
    s=s>=10?s:('0'+s);
    el.innerHTML = h+":"+m+":"+s;
    setTimeout(function(){my_clock(el)}, 1000);
}

function init(){
  my_clock($('clock_div'));
  var dailyUrl = "https://www.baidu.com/s?wd=";
  var onlineUrl = "https://www.google.com.hk/search?q=";

  $('daily_button').addEventListener('click', function () {
    window.open(dailyUrl + $('tid').value);
    // $('clock_div').innerHTML = dailyUrl + $('tid').value;
  });

  $('online_button').addEventListener('click', function () {
    var tid = document.getElementById('tid').innerHTML;
    window.open(onlineUrl + $('tid').value);
    // $('clock_div').innerHTML = onlineUrl + $('tid').value;
  });
}

init();
// document.addEventListener('DOMContentLoaded', init);

除錯方法

chrome-》擴充套件程式-》勾選開發者模式，將程式碼直接拖到這個頁面上，就安裝好了外掛
右擊擴充套件圖示-》點選“審查彈出內容”，就可以開始除錯

參考文獻

chrome開發中文文件
Chrome外掛（Extensions）開發攻略
Chrome擴充套件開發01–最簡單例項

相關文章