《三七海淘GDG.ppt》由会员分享,可在线阅读,更多相关《三七海淘GDG.ppt(29页珍藏版)》请在三一文库上搜索。
1、,三七海淘,张一凡、王传业、荣林,,省时省力省钱到手价估算,,三七海淘,省力新手引导&划词翻译,,三七海淘,省钱关注&降价提醒,,三七海淘,省时省力自动填写转运地址,,三七海淘,Chrome扩展开发基础,,Chrome扩展开发基础,结构:,,三七海淘,Chrome扩展开发基础,Manifest: https:/ pages: “background“: “page“: “background.html” ,,三七海淘,Chrome扩展开发基础,Content scripts: “content_scripts“: “matches“: “http:/*/*“, “https:/*/*“, “j
2、s“: “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_rend
3、er.html“ ,,三七海淘,Chrome扩展开发基础,chrome.* APIs https:/ 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
4、(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,
5、 key1: value1, callback); chrome.storage.sync.get(key, function(r) var v = rkey; ); chrome.storage.local.*,,三七海淘,Chrome扩展开发基础,调试,,三七海淘,项目经验分享,,项目经验分享,如何监控页面价格变化 如何避免与页面样式的互相干扰,,三七海淘,如何监控价格变化,举个栗子: http:/ 目标:用户选择不同尺寸时价格会有变化,此时同步更新我们计算的到手价,,三七海淘,如何监控价格变化,方案: 1、setInterval setInterval(getPrice, 1000);
6、,,三七海淘,如何监控价格变化,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);,,三七海淘,如
7、何避免对原页面的影响,Shadow Dom 什么是Shadow Dom? https:/dvcs.w3.org/hg/webcomponents/raw-file/57f8cfc4a7dc/explainer/index.html#shadow-dom-section “Shadow DOM是指浏览器的一种能力,它允许在文档(document)渲染时插入一棵DOM元素子树,但是这棵子树不在主DOM树中”,,三七海淘,Shadow Dom,看个栗子 ,,三七海淘,Shadow Dom,Shadow Dom中的元素: 不能被外部检索 不受外部样式影响 Shadow Dom中定义的样式也不会影响外部的元素,,三七海淘,Shadow Dom,Shadow Dom中可以指定想暴露出来以供外部修改样式的元素: Hello World !,,三七海淘,Q&A, QQ群:203584576 Email:,,三七海淘,
链接地址:https://www.31doc.com/p-2618927.html