Compatibility Detector Tool of Chrome extensions

2,472 views
2,350 views

Published on

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

No Downloads
Views
Total views
2,472
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
38
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Compatibility Detector Tool of Chrome extensions

  1. 1. Compatibility Detector Tool <br /> of Chrome extensions<br />Tapir <br /> 2011-05-07<br />
  2. 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. 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. 4. Chrome extensions<br />
  5. 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. 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. 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. 8. Compatibility Detector<br />
  9. 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. 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. 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. 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. 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. 14. ????<br />How to Start<br />Write Compatibility Detector Code<br />
  15. 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. 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. 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. 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. 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. 20. Build Your Own Test Framework<br />Multiplexing Detector Files<br />
  21. 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. 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. 23. Q&A<br />Mark huang, Google Chrome team<br />
  24. 24. Finished<br />Thanks<br />Zzzz...<br />Tapir <br />

×