Your SlideShare is downloading. ×
0
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Compatibility Detector Tool of Chrome extensions

2,073

Published on

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,073
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Compatibility Detector Tool <br /> of Chrome extensions<br />Tapir <br /> 2011-05-07<br />
  • 2. Compatibility Detector Project<br />Compatibility Detector scans for potential incompatible issues on a web page, for popular desktop browsers(IE, Firefox, Chrome, Opera, etc). The current version launch 14 detector.<br />Compatibility Detectorhttps://chrome.google.com/webstore/detail/fcillahbnhlpombgccogflhmgocfifma<br />Source Codehttps://code.google.com/p/compatibility-detector/<br />
  • 3. Degree of project completion<br />Check the actual document mode in browser<br />Check CSS box model<br />Check new block formatting context and IE hasLayout<br />Check MARQUEE's element<br />Check CENTER tag<br />Check "disabled" attribute<br />Check ': before' and ': after' pseudo-elements<br />Check document.createElement method<br />Check document.all<br />……<br />the total number of about 30 completed, launch 14.<br />Objectives: Detection W3Help all compatibility root causes.<br />
  • 4. Chrome extensions<br />
  • 5. Extensions Features<br />chrome.*API<br />Cross-Origin XMLHttpReques<br />Desktop Notification<br />JavaScriptand DOM API<br />HTML5<br /><canvas> <audio> <video> ……<br />localStorage<br />Web Database<br />CSS 3<br />CSS Selector<br />……<br />
  • 6. Working principle of extensions<br />Extension Process<br />Page Process<br />Background Page<br />Content Script<br />Page DOM<br />IPC<br />Page Script<br />Popup Page<br />IPC<br />Page Process<br />Content Script<br />Page DOM<br />Other HTML Page<br />Page Script<br />
  • 7. Content ScriptProcess Model<br />Content Script Process<br />C++ DOM Object<br />V8 Global Context (EcmaScript Environment)<br />Execution flow<br />ExtensionsDOMHandler<br />Content Script<br />Run Deferrer<br />Can not Access<br />V8 Global Context (EcmaScript Environment)<br />append Global Context<br />Page Script<br />Page Script Process<br />
  • 8. Compatibility Detector<br />
  • 9. Compatibility Detector Files<br />manifase.json<br />background.html<br />popup.html<br />loader.js<br />base_detection.js<br />framework_shared.js<br />framework.js<br />detectors/*.js<br />Extension Process<br />Page Process <br />Page Process <br />ContentScript Context<br />Page Script Context<br />
  • 10. Message Model<br />Popup.html<br />Other HTML page<br />background.html<br />extension.sendRequest<br />extension.onRequest<br />Page<br />contentScript<br />framewrok.js<br />framework_shared.js<br />Detectors/*.js<br />EventListener<br />framework_shared.js<br />Custom Event dispatch<br />Inject to psge Script<br />page Script <br />loader.js<br />createElement<br />run<br />DOM :: <HTML> <script> chrome_comp_injector () </script><br />
  • 11. Detector Model<br />Class<br />chrome_comp.CompDetect.declareDetector<br />chrome_comp.CompDetect.ScanDomBaseDetector<br />chrome_comp.CompDetect.NonScanDomBaseDetector<br />Methods<br />constructor<br />checkNode<br />postAnalyze<br />
  • 12. Detector Model<br />Detector Algorithm<br />Detector Algorithm<br />Detector Algorithm<br />addProblem<br />BaseDetector Class<br />postAnalyze(empty)<br />extend<br />constructor<br />NonScanDomBaseDetector Class<br />postAnalyze<br />extend<br />ScanDomBaseDetector Class<br />checkNode<br />document.createNodeIterator for each Nodes<br />
  • 13. JavaScript Hook Model<br />Input<br />Wrap<br />Same Name<br />Native Code<br />Detector Code<br />error<br />ok<br />Continue to other code<br />problems<br />chrome_comp. CompDetect .registerExistingMethodHook<br />chrome_comp. CompDetect .registerExistingPropertyHook<br />
  • 14. ????<br />How to Start<br />Write Compatibility Detector Code<br />
  • 15. mainfest.json<br />……<br />"content_scripts": [<br /> {<br /> "matches": [ "http://*/*", "https://*/*", "file://*" ],<br /> "js": [<br /> "loader.js",<br /> "framework.js",<br /> "framework_shared.js",<br /> "base_detection.js",<br /> "config.js",<br /> "w3help_issues.js",<br /> "non_w3help_issues.js",<br /> // Detector<br />"detectors/sample_check_node.js",<br />……<br />
  • 16. addScriptToInject(function() {<br />chrome_comp.CompDetect.declareDetector(<br />'sample_check_node',<br />chrome_comp.CompDetect.ScanDomBaseDetector,<br />functionconstructor() {<br /> this.CHECK_TAG_NAME = {SPAN: true, DIV: true, TALBE: true};<br /> this.addProblem = function (node) {<br /> node.style.backgroundColor = 'red';<br /> };<br />}, // constructor<br />functioncheckNode(node, context) {<br /> if (Node.ELEMENT_NODE != node.nodeType || context.isDisplayNone())<br /> return;<br /> if (node.tagName in this.CHECK_TAG_NAME) {<br /> if (node.hasAttribute('width') || node.hasAttribute('height'))<br /> this.addProblem(node);<br /> }<br />}<br />); // declareDetector<br />});<br />ScanDomBaseDetector checkNode<br />
  • 17. addScriptToInject(function() {<br />chrome_comp.CompDetect.declareDetector(<br />'sample_post_analyze',<br />chrome_comp.CompDetect.NonScanDomBaseDetector,<br />null, // constructor<br />functionpostAnalyze() {<br /> var m = chrome_comp.documentMode;<br /> m.hasCommentBeforeDTD && log('There has Comment before DOCTYPE');<br /> m.hasConditionalCommentBeforeDTD && log('There has IE conditional comment before DOCTYPE');<br /> m.isUnusualDocType && log('There is unknown DOCTYPE');<br /> (document.querySelectorAll('meta').length == 0) && log('This page has no Meta tag'); <br />functionlog(str) {<br /> var t = document.createTextNode(str),p = document.createElement('p');<br /> p.appendChild(t);<br /> document.body.appendChild(p);<br /> }<br />}<br />); // declareDetector<br />});<br />NonScanDomBaseDetector postAnalyze<br />
  • 18. addScriptToInject(function() {<br />chrome_comp.CompDetect.declareDetector(<br />'sample_hook',<br />chrome_comp.CompDetect.NonScanDomBaseDetector,<br />functionconstructor() {<br />var This = this;<br /> this.log = function(str) {<br /> var t = document.createTextNode(str),p = document.createElement('p');<br /> p.appendChild(t);<br /> document.body.appendChild(p);<br /> };<br /> this.evalHandler_ = function (result, originalArguments, callStack) {<br /> if (originalArguments[0].indexOf('var ') == 0)<br /> window.addEventListener('load',function() {<br /> This.log('Performed using the eval method ' + originalArguments[0] + 'statement.');<br /> },false)<br /> };<br />},<br />function setUp() {<br /> chrome_comp.CompDetect.registerExistingMethodHook(window, 'eval', this.evalHandler_);<br />},<br />function cleanUp() {<br /> chrome_comp.CompDetect.unregisterExistingMethodHook(window, 'eval', this.evalHandler_);<br />}<br />); // declareDetector<br />});<br />NonScanDomBaseDetector Method Hook<br />
  • 19. addScriptToInject(function() {<br />chrome_comp.CompDetect.declareDetector(<br />'sample_hook_2',<br />chrome_comp.CompDetect.NonScanDomBaseDetector,<br />functionconstructor() {<br /> var This = this;<br /> this.log = function(str) {<br /> var t = document.createTextNode(str),p = document.createElement('p');<br /> p.appendChild(t);<br /> document.body.appendChild(p);<br /> };<br /> this.handler_ =function(oldValue, newValue, reason) {<br /> if (reason == 'get') {<br /> This.log('Get document.documentMode value is ' + oldValue);<br /> }<br /> if (reason == 'set') {<br /> This.log('Set document.documentMode value is ' + newValue);<br /> }<br /> };<br />},<br />function setUp() {<br /> chrome_comp.CompDetect.registerSimplePropertyHook(document, 'documentMode', this.handler_);<br />},<br />function cleanUp() {<br /> chrome_comp.CompDetect.registerSimplePropertyHook(document, 'documentMode', this.handler_);<br />}<br />); // declareDetector<br />});<br />NonScanDomBaseDetector Property Hook<br />
  • 20. Build Your Own Test Framework<br />Multiplexing Detector Files<br />
  • 21. More accurate extract the contents in browsers Kernel <br />Detector Algorithm<br />Detector Algorithm<br />Detector Algorithm<br />IE Bot<br />addProblem<br />WebKit Bot<br />BaseDetector Class<br />constructor<br />NonScanDomBaseDetector Class<br />Browsers Bot<br />postAnalyze<br />Json<br />ScanDomBaseDetector Class<br />Browser API<br />checkNode<br />C++ String <br />implement<br />Desktop app<br />Web app<br />Your test framework<br />PHP ...<br />Local System<br />
  • 22. Compatibility Test Bot Demo<br />D:ProgramDataWindowsDesktopdemo>Detect.exe --url=clear_float.html<br />content-type:<br />problems:<br />[{"id":"RM8002","info":{"repeatedCount":6,"occurrences":[{"details":"Problem Ele<br />ment height is 38px","html":["<div id="div1" style="zoom:1;" expectedproblem<br />s="RM8002">n div1 zoom:1;n <div style="float:left;">div float:left;</div<br />>n <div style="float:right;">div float:right;</div>n</div>","<div style="f<br />loat:left;">div float:left;</div>"],"stack":""},{"details":"Problem Element hei<br />ght is 16px","html":["<div id="div5" style="height:1em;" expectedproblems="<br />RM8002">n div5 height:1em;n <div style="float:left;">div float:left;</div<br />>n <div style="float:right;">div float:right;</div>n</div>","<div style="f<br />loat:left;">div float:left;</div>"],"stack":""}……<br />
  • 23. Q&A<br />Mark huang, Google Chrome team<br />
  • 24. Finished<br />Thanks<br />Zzzz...<br />Tapir <br />

×