smallpaes

document.addEventListener("DOMContentLoaded", function() {
  // 選定頁面中帶有 lazy class 名稱的那張圖片
  let lazyImage = document.querySelector("img.lazy")
  
  const lazyLoad = function() {
    // 確認圖片是否進到可視範圍
    if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0)) {
      // 確認有才加載圖片
      lazyImage.src = lazyImage.dataset.src
      lazyImage.srcset = lazyImage.dataset.srcset

smallpaes

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

smallpaes

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

smallpaes

chrome.runtime.onInstalled.addListener(function() {
  // 套件成功安裝或更新、瀏覽器更新時，刪除現有條件
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // 新增條件設定
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // 定義規則內容
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'medium.com/麥克的半路出家筆記' },

smallpaes

// 監聽頁面跳轉，且文件讀取完成後
chrome.webNavigation.onCompleted.addListener(function() {
  alert("這個部落格真棒！");
}, {url: [{urlMatches : 'https://medium.com/麥克的半路出家筆記'}]});

smallpaes

<template>
  <div class="container">
    <div class="row">
      <div class="card col s6 offset-s3">
        <form class="card-content" @submit.prevent="geocode">
          <!--輸入餐廳資訊的表單...-->
        </form>
      </div>
      <div class="card col s6 offset-s3" v-if="hasGeo">
        <div class="card-content">

smallpaes

<template>
  <div class="container">
    <div class="row">
      <div class="card col s6 offset-s3">
        <form class="card-content" @submit.prevent="geocode">
          <h5 class="center">餐廳資訊</h5>
          <div class="row">
            <div class="input-field col s12">
              <label for="name">餐廳名稱</label>
              <input type="text" id="name" v-model="restaurant.name" />

smallpaes

<script>
export default {
  data() {
    return {
      restaurant: {
        address: "",
        name: "",
        // 用來存放餐廳經緯度
        lat: "",
        lng: ""

smallpaes

// 建立 geocoder 物件實例
const geocoder = new google.maps.Geocoder();

// 請 Google Maps API 依據地址轉換成經緯度
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == 'OK') {
    // 若轉換成功...
  } else {
    // 若轉換失敗...
    console.log(status)

smallpaes

<template>
  <div class="container">
    <div class="row">
      <div class="card col s6 offset-s3">
        <form class="card-content" @submit.prevent="geocode">
          <h5 class="center">餐廳資訊</h5>
          <div class="row">
            <div class="input-field col s12">
              <label for="name">餐廳名稱</label>
              <input type="text" id="name" v-model="restaurant.name" />