韩国电商平台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 一览

审核问题

您的项目需求