三七海淘GDG.pptVIP

张一凡、王传业、荣林 省时省力省钱—到手价估算 三七海淘 省力—新手引导划词翻译 三七海淘 省钱—关注降价提醒 三七海淘 省时省力—自动填写转运地址 三七海淘 Chrome扩展开发基础 Chrome扩展开发基础 结构： 三七海淘 Chrome扩展开发基础 Manifest： /extensions/manifest.html 三七海淘 Chrome扩展开发基础 Background pages： background: { page: background.html” } 三七海淘 Chrome扩展开发基础 Content scripts： content_scripts: [ { matches: [http://*/*, https://*/*], js: [content.js] , css: [css/amazon.css] } ] 三七海淘 Chrome扩展开发基础 Browser action： browser_action: { default_title: 三七海淘-海外购物助手, default_icon: img/logo19.png, default_popup: popup.html } chrome.browserAction.setBadgeText({text: hello}); 三七海淘 Chrome扩展开发基础 Sandbox： sandbox: { pages: [ tpl_render.html ] } 三七海淘 Chrome扩展开发基础 chrome.* APIs /extensions/api_index.html 三七海淘 Chrome扩展开发基础 chrome.extension.getURL chrome.extension.sendRequest chrome.extension.onRequest.addListener chrome.storage 三七海淘 Chrome扩展开发基础 chrome.extension.getURL chrome.extension.getURL(css/style.css) web_accessible_resources: [css/style.css] 三七海淘 Chrome扩展开发基础 background-image: url(chrome-extension://__MSG_@@extension_id__/img/a.png); 三七海淘 Chrome扩展开发基础 chrome.extension.sendRequest(data, callback) chrome.extension.onRequest.addListener(function(req, sender, sendResponse) { var r = doSomethingWithReq(req); sendResponse({res: r}); }) 三七海淘 Chrome扩展开发基础 chrome.storage.sync.set({key: value, key1: value1}, callback); chrome.storage.sync.get(key, function(r) { var v = r[key]; }); chrome.storage.local.* 三七海淘 Chrome扩展开发基础 调试 三七海淘 项目经验分享 项目经验分享 如何监控页面价格变化 如何避免与页面样式的互相干扰 三七海淘 如何监控价格变化 举个栗子： /Roxy-Juniors-Shoreline-Ethnic-X-Large/dp/B00CTA2DN6/ 目标：用户选择不同尺寸时价格会有变化，此时同步更新我们计算的到手价 三七海淘 如何监控价格变化 方案： 1、setInterval … setInterval(getPrice, 1000); … 三七海淘 如何监控价格变化 2、MutationObserver var observer = new MutationObserver(function(mutations) { console.log(mutations); }); observer.observe(target, { childList: true, attributes: true, characterData: true, subtree: true,