續上篇，由於 aoxis 行不通，所以就改用 jsonp

安裝 jsonp
npm install jsonp

然後 index.js 改引用 jsonp

import Vue from 'vue'
import jsonp from 'jsonp';
import App from './App.vue'

Vue.prototype.jsonp = jsonp;
new Vue({
  el: '#app',
  render: h => h(App)
})

app.vue

<template>
  <div id="app">
    {{item.County}} - UV : {{ item.UVI }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      item : {}
    }
  },
  mounted() {
    var vm = this;
    vm.getAir();
  },
  methods : {
    getAir : function(){
      var vm = this;
      var url = "https://opendata.epa.gov.tw/ws/Data/UV/?$orderby=PublishAgency&$skip=0&$top=1&format=json";
      this.jsonp(url, null, (err, data) => {
   if (err) {
     console.error(err.message);
   } else {
     if (data.length > 0) {
       vm.item = data[0];
     }
   }
 })
    }
  }
}
</script>

manifest.json 需要將呼叫的網址加入 content_security_policy

{
    "manifest_version" : 2, 
    "name" : "GetUV", 
    "version" : "1.0",
    "description" : "Get UV",
    "icons":{ 
        "128" : "icon128.png",
        "48"  : "icon48.png",
        "16"  : "icon16.png"
    },
    "browser_action" :{ 
        "default_icon" : "icon16.png",
        "default_popup" : "popup.html"
    },
    "content_security_policy": "script-src 'self' https://opendata.epa.gov.tw; object-src 'self'"
}

執行後點擊圖示，雖然速度不夠快，但是可以顯示 UV 數值

感謝收看 :)