三七海淘GDG.ppt
,三七海淘,张一凡、王传业、荣林,www.37haitao.com,省时省力省钱到手价估算,www.37haitao.com,三七海淘,省力新手引导&划词翻译,www.37haitao.com,三七海淘,省钱关注&降价提醒,www.37haitao.com,三七海淘,省时省力自动填写转运地址,www.37haitao.com,三七海淘,Chrome扩展开发基础,www.37haitao.com,Chrome扩展开发基础,结构：,www.37haitao.com,三七海淘,Chrome扩展开发基础,Manifest： https:/developer.chrome.com/extensions/manifest.html,www.37haitao.com,三七海淘,Chrome扩展开发基础,Background pages： “background“: “page“: “background.html” ,www.37haitao.com,三七海淘,Chrome扩展开发基础,Content scripts： “content_scripts“: “matches“: “http:/*/*“, “https:/*/*“, “js“: “content.js“ , “css“: “css/amazon.css“ ,www.37haitao.com,三七海淘,Chrome扩展开发基础,Browser action： “browser_action“: “default_title“: “三七海淘-海外购物助手“, “default_icon“: “img/logo19.png“, “default_popup“: “popup.html“ chrome.browserAction.setBadgeText(text: “hello“);,www.37haitao.com,三七海淘,Chrome扩展开发基础,Sandbox： “sandbox“: “pages“: “tpl_render.html“ ,www.37haitao.com,三七海淘,Chrome扩展开发基础,chrome.* APIs https:/developer.chrome.com/extensions/api_index.html,www.37haitao.com,三七海淘,Chrome扩展开发基础,chrome.extension.getURL chrome.extension.sendRequest chrome.extension.onRequest.addListener chrome.storage,www.37haitao.com,三七海淘,Chrome扩展开发基础,chrome.extension.getURL chrome.extension.getURL('css/style.css') “web_accessible_resources“: “css/style.css“,www.37haitao.com,三七海淘,Chrome扩展开发基础,background-image: url(chrome-extension:/_MSG_extension_id_/img/a.png);,www.37haitao.com,三七海淘,Chrome扩展开发基础,chrome.extension.sendRequest(data, callback) chrome.extension.onRequest.addListener(function(req, sender, sendResponse) var r = doSomethingWithReq(req); sendResponse(res: r); ),www.37haitao.com,三七海淘,Chrome扩展开发基础,chrome.storage.sync.set(key: value, key1: value1, callback); chrome.storage.sync.get(key, function(r) var v = rkey; ); chrome.storage.local.*,www.37haitao.com,三七海淘,Chrome扩展开发基础,调试,www.37haitao.com,三七海淘,项目经验分享,www.37haitao.com,项目经验分享,如何监控页面价格变化 如何避免与页面样式的互相干扰,www.37haitao.com,三七海淘,如何监控价格变化,举个栗子： http:/www.amazon.com/Roxy-Juniors-Shoreline-Ethnic-X-Large/dp/B00CTA2DN6/ 目标：用户选择不同尺寸时价格会有变化，此时同步更新我们计算的到手价,www.37haitao.com,三七海淘,如何监控价格变化,方案： 1、setInterval setInterval(getPrice, 1000); ,www.37haitao.com,三七海淘,如何监控价格变化,2、MutationObserver var observer = new MutationObserver(function(mutations) console.log(mutations); ); observer.observe(target, childList: true, attributes: true, characterData: true, subtree: true, attributeOldValue: true, characterDataOldValue: true, attributeFilter: value);,www.37haitao.com,三七海淘,如何避免对原页面的影响,Shadow Dom 什么是Shadow Dom？ https:/dvcs.w3.org/hg/webcomponents/raw-file/57f8cfc4a7dc/explainer/index.html#shadow-dom-section “Shadow DOM是指浏览器的一种能力，它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中”,www.37haitao.com,三七海淘,Shadow Dom,看个栗子 ,www.37haitao.com,三七海淘,Shadow Dom,Shadow Dom中的元素： 不能被外部检索 不受外部样式影响 Shadow Dom中定义的样式也不会影响外部的元素,www.37haitao.com,三七海淘,Shadow Dom,Shadow Dom中可以指定想暴露出来以供外部修改样式的元素： Hello World !,www.37haitao.com,三七海淘,Q&A,www.37haitao.com QQ群：203584576 Email：37haitaogmail.com,www.37haitao.com,三七海淘,
