只是为了记录，写的有点简略，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-》扩展程序-》勾选开发者模式，将代码直接拖到这个页面上，就安装好了插件
右击扩展图标-》点击“审查弹出内容”，就可以开始调试