chrome插件开发——订单号环境切换

来源：互联网发布：c语言关键字大全编辑：程序博客网时间：2024/06/05 06:01

只是为了记录，写的有点简略，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–最简单实例

阅读全文

1 0