韓國電商平臺Gmarket新賣家須知

.查詢及申請提款：從Esm global seller 預支金（??? ?? ??? )管理可以1美金為單位，查詢和申請提款。

2.銷售預支金(?????)與現金余款不同，不可購買產品以及G cash。銷售預支金（?????）可根據賣家的需求，設置（匯款）結算方式，首次需賣家自己手動設置后可自動提款。

設置鏈接：http://pics.esmplus.com/front/Manual/SellerGuide2/depositSettlement.html#depositSettlementGuide5

3.收款人信息不可變更，可變更銀行信息以及賬號。

*不建議更改賬號等信息。（時效較慢，除特殊情情況），如需要變更收款人名稱，需重新申請gmarket賬戶。

銀行信息變更后48小時以內提款申請的金額，將自動進入原銀行賬戶，請注意。

4.為了確認海外賬戶的準確性，首次提款將被自動取消， -》請在2日后請重新申請。

首次申請提款的賣家，請注意因海外匯款手續費約25~40美金扣款，盡量不要進行小金額的提款。

(10萬韓幣一下的小額，有可能會被取消提款，請注意。）

國際賣家匯款相關內容: http://doc.gmarket.co.kr/esm/manual_kmh/??%20???_04_????.pdf

后臺管理地址：https://www.esmplus.com

教育相關資料： http://www.ebayedu.com/mainMenu

銷售相關 BEST問答：http://www.gmarket.co.kr/challenge/neo_bbs/say.asp

根據品類的銷售手續費： http://gi.esmplus.com/test4plan/notice/20180705_notice/gmkt_popup.html?fromId=www.esmplus.com

介

嗨，各位極客；在你的瀏覽器中裝上了多少插件呢？讓我猜猜：tampermonkey 油猴腳本，Chrono下載管理器，bilibilihelper，喔當然還有必不可少的 Adblock。有了解過這些插件是怎么運作的么？想要完成一個自己的插件么？快和我一起動手吧！

基礎知識

本文參考 Chrome Extensions V3版本開發指南，接下來我們簡單地介紹一下一個插件的組成，

Chrome 插件通常由以下幾部分組成：

manifest.json：插件的 meta 信息，包含插件的名稱、版本號、圖標、腳本文件名稱等信息，從這里你可以看到全部的參數。
popup：點擊插件觸發的彈框頁面，會創建一個獨立的瀏覽器頁面實例。
options：插件的擴展配置頁面，會創建一個獨立的瀏覽器頁面實例。
background.js：插件的后臺運行腳本，單獨地運行在一個瀏覽器實例中。

manifest.json 示例

{
  "manifest_version": 3,
  "name": "Chrome 插件開發 示例",
  "description": "這是一個 Chrome 開發示例工程",
  "version": "1.0",
  "permissions": [ // 插件需要的權限信息 依次為：數據存儲、訪問活躍的標簽頁、執行插入腳本
    "storage", "activeTab", "scripting"
  ],
  // 時間
  "action": {
    // 設置插件在插件區域的icon
    "default_icon": {
      "16": "readIcon.png",
      "32": "readIcon.png",
      "64": "readIcon.png",
      "128": "readIcon.png"
    },
    // 插件在插件區域被點擊時的彈出頁面
    "default_popup": "popup.html"
  },
  // 后臺運行腳本
  "background": {
    "service_worker": "background.js"
  },
  // 全局icon 會出現在配置頁面的icon中
  "icons": {
    "16": "bookIcon.png",
    "32": "bookIcon.png",
    "64": "bookIcon.png",
    "128": "bookIcon.png"
  },
  // 配置頁面
  "options_page": "options.html"
}

popup 事件

在插件區域點擊咱們插件后將觸發popup 事件，喚起 popup.html 頁面

option 事件

點擊右鍵插件中的選項按鈕，將觸發option 事件，喚起 options.html 頁面

background 事件

當插件被載入后，將后臺執行 background.js 腳本

開始動手

我們將按照官方示例完成一個示例工程，在這個工程中，我們將提供一個可以設置網頁背景顏色的小工具，并且在配置頁面提供多個顏色供用戶選擇。

那我們就開始吧！先創建一個文件夾，命名為 start，然后用編輯器打開文件夾，開始編碼啦，我使用的是vscode，當然任何編輯器都可以完成這項編碼。

創建 manifest.json 描述文件

創建一個 manifest.json 文件

{
  "manifest_version": 3,
  "name": "Chrome 插件開發 示例",
  "description": "這是一個 Chrome 開發示例工程",
  "version": "1.0",
  "permissions": [
    "storage", "activeTab", "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "64": "icon.png",
    "128": "icon.png"
  },
}

找一張你喜歡的照片，命名為icon并添加到文件夾中，這里先沒有配置popup頁面和option頁面，不著急，一步步來。

Background Js 后臺執行程序

創建一個 background.js 文件

// 初始化一個顏色值
let color='#3aa757';

// 在chrome瀏覽器創建的時候，設置顏色初始值
chrome.runtime.onInstalled.addListener(()=> {
  // 需要注意的是，此時設置的持久對象的鍵名為 color 其值為 #3aa757
  chrome.storage.sync.set({ color });
  console.log('設置一個默認的顏色，默認顏色值為綠色 %cgreen', `color: ${color}`);
});

然后就可以嘗試一下插件的運行啦，進入插件頁面，先在右上角開啟開發者模式，然后點擊加載已解壓的擴展程序，找到你的 start 文件夾加載進來。

此時頁面上就會出現你的插件了，你會發現在有一個Service Worker視圖可以點擊，點擊查看一下

你就可以看到 background.js 成功運行并打印了日志

Popup 彈出頁面

接下來我們配置一個彈出頁面，創建 popup.html

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>插件彈出頁面</title>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
    <img url="icon.png"/>
    <!-- 引入js -->
    <script src="popup.js"></script>
  </body>
</html>

創建 popup.js

// 獲得 改變顏色的按鈕
let changeColor=document.getElementById("changeColor");

// 獲取當前已設置顏色
chrome.storage.sync.get("color", ({ color })=> {
  changeColor.style.backgroundColor=color;
});

// 創建按鈕點擊事件 觸發對當前激活的瀏覽器窗口中的當前激活的選項卡設置背景顏色
changeColor.addEventListener("click", async ()=> {
  let [tab]=await chrome.tabs.query({ active: true, currentWindow: true });
  
  // 注入執行js代碼
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor,
  });
});

// 注入執行的方法塊
// 設置body的背景顏色為目標顏色
function setPageBackgroundColor() {
  chrome.storage.sync.get("color", ({ color })=> {
    document.body.style.backgroundColor=color;
  });
}

創建 button.css

body {
  min-width: 357px;
  overflow-x: hidden;
}

img {
  margin: 5px;
  border: 2px solid black;
  vertical-align: middle;
  width: 75px;
  height: 75px;
}

button {
  height: 30px;
  width: 30px;
  outline: none;
  margin: 10px;
  border: none;
  border-radius: 2px;
}

button.current {
  box-shadow: 0 0 0 2px white,
              0 0 0 4px black;
}

喔當然，還要修改 manifest.json，添加上 popup.html的配置，還需要準備一張在插件區域展示的 popupIcon 照片。

{
  "manifest_version": 3,
  "name": "Chrome 插件開發 示例",
  ... 省略 ...
    "128": "icon.png"
  },
  "action": {
    "default_icon": {
      "16": "popupIcon.png",
      "32": "popupIcon.png",
      "64": "popupIcon.png",
      "128": "popupIcon.png"
    },
    "default_popup": "popup.html"
  }
}

然后在插件頁面刷新重新加載

這時候我們就可以點擊插件啦，按照1點擊插件，然后點擊2，觸發按鈕事件

bingo! 當前頁面的背景顏色變成綠色了。

似乎只有一個綠色不太合適，我們得為用戶提供更多的選擇，那就再做一個選項頁面，提供配置功能吧。

Option 選項配置頁面

創建 options.html

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>插件選項配置頁面</title>
  <link rel="stylesheet" href="button.css">
</head>

<body>
  <div id="buttonDiv">
  </div>
  <div>
    <p>選擇一個新的背景顏色</p>
  </div>
  <script src="options.js"></script>
</body>

</html>

創建 options.js

// 獲取按鈕區域 div
let page=document.getElementById("buttonDiv");
// button.css 有一個 button current css 樣式，為選中的顏色添加出黑色邊框
let selectedClassName="current";
// 設置待選顏色按鈕
const presetButtonColors=["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"];

// 創建按鈕事件 通過標記所選按鈕 保存顏色
function handleButtonClick(event) {
  // 從事件的父級中找到之前被選中的按鈕
  let current=event.target.parentElement.querySelector(
    `.${selectedClassName}`
  );
  // 從他的class列表中去掉選中狀態
  if (current && current !==event.target) {
    current.classList.remove(selectedClassName);
  }

  // 獲取按鈕攜帶的數據信息 也就是我們想要的顏色
  let color=event.target.dataset.color;
  // 添加選中狀態
  event.target.classList.add(selectedClassName);
  // 設置當前選中顏色
  chrome.storage.sync.set({ color });
}

// 按顏色列表依次添加按鈕到頁面
function constructOptions(buttonColors) {
  // 獲取當前已設置的顏色
  chrome.storage.sync.get("color", (data)=> {
    let currentColor=data.color;
    // 循環顏色列表
    for (let buttonColor of buttonColors) {
      // 創建按鈕 賦予按鈕顏色
      let button=document.createElement("button");
      button.dataset.color=buttonColor;
      button.style.backgroundColor=buttonColor;

      // 如果是當前已選中的按鈕，則設置
      if (buttonColor===currentColor) {
        button.classList.add(selectedClassName);
      }

      // 創建點擊事件
      button.addEventListener("click", handleButtonClick);
      // 添加回頁面上
      page.appendChild(button);
    }
  });
}

// js 被加載后 自執行初始化方法 創建按鈕
constructOptions(presetButtonColors);

然后再修改一次 manifest.json

{
  "manifest_version": 3,
  "name": "Chrome 插件開發 示例",
  ... 省略 ...
    "default_popup": "popup.html"
  },
  "options_page": "options.html"
}

然后再重載一次插件，bingo！右鍵我們的插件就多出選項頁面啦

點擊進入選項頁面，出現了我們在代碼中配置的四個顏色了，隨便點選其他三種顏色。

我們就可以驚喜的發現在popup頁面的按鈕顏色也發生了變化了。

小結

至此，我們的起步示例工程的開發就完成了。

在這次工程中，我們完成了配置基本信息、開發了popup 彈出頁面、option 配置頁面，并實現了多頁面間的數據共享功能，并了解到各個頁面間的通信都需要通過第三者進行處理，因為本質上每個頁面都是獨立的進程。

那我想提個小問題，如果我想在選項配置頁面選擇了顏色之后，然后再點擊到一個具體的選項卡中自動幫我修改背景顏色，應該怎么實現呢？

谷歌插件示例工程
https://github.com/GoogleChrome/chrome-extensions-samples
谷歌插件官方文檔
https://developer.chrome.com/docs/extensions/

言

在軟件開發的生命周期中，發布流程是將產品推向市場并交付給用戶的關鍵階段。它不僅標志著一個項目從開發階段到用戶手中的轉變，也是確保軟件質量和用戶體驗的重要環節。那么一個清晰、高效且可重復的發布流程對于任何軟件項目的成功至關重要，下文我們將主要闡述Edge擴展應用程序的基本發布流程。

發布

發布地址

https://partner.microsoft.com/zh-cn/dashboard/microsoftedge/overview

在這里插入圖片描述

擴展概述

頁面詳細展示了應用程序的類別、可見性、語言、URL、公鑰、CRX ID(用于打包擴展程序)等信息。如果你是第一次發布擴展應用程序，會自動跳轉到此頁面，未跳轉則通過點擊創建擴展按鈕進入此頁面。

程序包

在上傳程序包之前還得準備好 manifest.json 配置文件。

manifest.json 是一個配置文件，用于定義 Microsoft Edge 擴展程序的屬性和行為。這個文件遵循了 JSON 格式，包含了擴展程序的元數據、功能聲明、權限請求等信息。以下是 manifest.json 文件中常見的一些字段：

manifest_version: 指定 manifest 文件的版本，目前通常是 2 或 3。

name: 擴展程序的名稱。

version: 擴展程序的版本號。

description: 擴展程序的簡短描述。

icons: 定義擴展程序的圖標路徑。

permissions: 擴展程序請求的權限列表。

background: 定義后臺腳本的配置，包括腳本路徑和腳本運行的時機。

browser_action: 定義瀏覽器操作按鈕的配置，如圖標、標題和彈出頁面。

page_action: 類似于瀏覽器操作，但僅在特定頁面上可用。

content_scripts: 定義要在特定網頁上運行的腳本。

content_security_policy: 定義內容腳本的安全策略。

web_accessible_resources: 定義可以從其他源訪問的資源。

action: 定義擴展程序的用戶界面元素，如彈出頁面、選項頁面等。

options_page: 指定擴展程序的選項頁面路徑。

default_locale: 默認的語言環境。

commands: 定義用戶可以通過快捷鍵觸發的命令。

omnibox: 定義地址欄搜索建議的配置。

host_permissions: 定義擴展程序可以訪問的特定網站。

optional_permissions: 用戶可選的權限。

minimum_chrome_version: 擴展程序所需的最低版本的瀏覽器。

author: 擴展程序的作者信息。

homepage_url: 擴展程序的主頁鏈接。

這是一個基本配置的示例：

{
  "manifest_version": 3,
  "name": "應用名稱",
  "description": "應用描述",
  "version": "1.0.0",
  "icons": {
    "16": "logo_16.png",
    "48": "logo_48.png",
    "128": "logo_128.png"
  },
  "background": {
    "service_worker": "background.js",
    "type":"module"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "popup.png",
    "default_title": "popup"
  },
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "permissions": [
    "tabs",
    "storage",
  ]
}

編寫完配置完后，將 manifest.json 文件放入項目根目錄，然后將整個根目錄打包為zip文件，并上傳程序包。

在這里插入圖片描述

可用性

可用性用于配置應用的用戶群體和市場，無特殊情況直接保持默認選項即可。

在這里插入圖片描述

屬性

屬性用于配置應用的類別、隱私策略、開發者官網等。其中類別是必填項，根據應用用途選擇即可。支持詳細信息同理。其它信息可在應用上架后再來修改。

在這里插入圖片描述

Store 一覽

這里主要配置擴展的多語言版本，包括名稱、LOGO、描述，進入編輯詳細信息，還可以設置應用截圖、搜索詞等信息。

在這里插入圖片描述

完成上述配置后，點擊右上角發布按鈕發布應用，然后等待審核即可。

審核問題

Distinct Function & Value: AccurateRepresentation

在這里插入圖片描述

大概率是你的 permissions 權限未給完整，這里就是因為程序中使用了IndexedDB，但并未在 permissions 中聲明 storage 權限。

在線咨詢

上一篇：JavaScript-如何從一個數組中刪除一個特定的
下一篇：細說html的meta

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

韓國電商平臺Gmarket新賣家須知

介

基礎知識

manifest.json 示例

popup 事件

option 事件

background 事件

開始動手

創建 manifest.json 描述文件

Background Js 后臺執行程序

Popup 彈出頁面

Option 選項配置頁面

小結

言

發布

程序包

可用性

屬性

Store 一覽

審核問題

您的項目需求