Compatibility Detector Tool of Chrome extensions
Download as PPTX, PDF4 likes1,053 views
The document describes the Compatibility Detector Tool, an extension for Chrome that scans web pages for potential compatibility issues across different browsers. It launches with 14 detectors that check things like CSS box model compliance, new block formatting contexts, and pseudo-elements. The extension uses a detector model with base detector classes to check nodes or perform post-analysis. Developers can write custom detectors by declaring them using the provided detector APIs and registering hooks. The source code is available on Google Code to allow building custom compatibility testing frameworks.
![mainfest.json……"content_scripts": [ { "matches": [ "http://*/*", "https://*/*", "file://*" ], "js": [ "loader.js", "framework.js", "framework_shared.js", "base_detection.js", "config.js", "w3help_issues.js", "non_w3help_issues.js", // Detector"detectors/sample_check_node.js",……](https://image.slidesharecdn.com/compatibility-110508212425-phpapp01/85/Compatibility-Detector-Tool-of-Chrome-extensions-15-320.jpg)
![addScriptToInject(function() {chrome_comp.CompDetect.declareDetector('sample_hook',chrome_comp.CompDetect.NonScanDomBaseDetector,functionconstructor() {var This = this; this.log = function(str) { var t = document.createTextNode(str),p = document.createElement('p'); p.appendChild(t); document.body.appendChild(p); }; this.evalHandler_ = function (result, originalArguments, callStack) { if (originalArguments[0].indexOf('var ') == 0) window.addEventListener('load',function() { This.log('Performed using the eval method ' + originalArguments[0] + 'statement.'); },false) };},function setUp() { chrome_comp.CompDetect.registerExistingMethodHook(window, 'eval', this.evalHandler_);},function cleanUp() { chrome_comp.CompDetect.unregisterExistingMethodHook(window, 'eval', this.evalHandler_);}); // declareDetector});NonScanDomBaseDetector Method Hook](https://image.slidesharecdn.com/compatibility-110508212425-phpapp01/85/Compatibility-Detector-Tool-of-Chrome-extensions-18-320.jpg)
![Compatibility Test Bot DemoD:\ProgramData\Windows\Desktop\demo>Detect.exe --url=clear_float.htmlcontent-type:problems:[{"id":"RM8002","info":{"repeatedCount":6,"occurrences":[{"details":"Problem Element height is 38px","html":["<div id=\"div1\" style=\"zoom:1;\" expectedproblems=\"RM8002\">\n div1 zoom:1;\n <div style=\"float:left;\">div float:left;</div>\n <div style=\"float:right;\">div float:right;</div>\n</div>","<div style=\"float:left;\">div float:left;</div>"],"stack":""},{"details":"Problem Element height is 16px","html":["<div id=\"div5\" style=\"height:1em;\" expectedproblems=\"RM8002\">\n div5 height:1em;\n <div style=\"float:left;\">div float:left;</div>\n <div style=\"float:right;\">div float:right;</div>\n</div>","<div style=\"float:left;\">div float:left;</div>"],"stack":""}……](https://image.slidesharecdn.com/compatibility-110508212425-phpapp01/85/Compatibility-Detector-Tool-of-Chrome-extensions-22-320.jpg)
Compatibility Detector Tool of Chrome extensions
- 1. Compatibility Detector Tool of Chrome extensionsTapir 2011-05-07
- 2. Compatibility Detector ProjectCompatibility 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.Compatibility Detectorhttps://chrome.google.com/webstore/detail/fcillahbnhlpombgccogflhmgocfifmaSource Codehttps://code.google.com/p/compatibility-detector/
- 3. Degree of project completionCheck the actual document mode in browserCheck CSS box modelCheck new block formatting context and IE hasLayoutCheck MARQUEE's elementCheck CENTER tagCheck "disabled" attributeCheck ': before' and ': after' pseudo-elementsCheck document.createElement methodCheck document.all……the total number of about 30 completed, launch 14.Objectives: Detection W3Help all compatibility root causes.
- 5. Extensions Featureschrome.*APICross-Origin XMLHttpRequesDesktop NotificationJavaScriptand DOM APIHTML5<canvas> <audio> <video> ……localStorageWeb DatabaseCSS 3CSS Selector……
- 6. Working principle of extensionsExtension ProcessPage ProcessBackground PageContent ScriptPage DOMIPCPage ScriptPopup PageIPCPage ProcessContent ScriptPage DOMOther HTML PagePage Script
- 7. Content ScriptProcess ModelContent Script ProcessC++ DOM ObjectV8 Global Context (EcmaScript Environment)Execution flowExtensionsDOMHandlerContent ScriptRun DeferrerCan not AccessV8 Global Context (EcmaScript Environment)append Global ContextPage ScriptPage Script Process
- 9. Compatibility Detector Filesmanifase.jsonbackground.htmlpopup.htmlloader.jsbase_detection.jsframework_shared.jsframework.jsdetectors/*.jsExtension ProcessPage Process Page Process ContentScript ContextPage Script Context
- 10. Message ModelPopup.htmlOther HTML pagebackground.htmlextension.sendRequestextension.onRequestPagecontentScriptframewrok.jsframework_shared.jsDetectors/*.jsEventListenerframework_shared.jsCustom Event dispatchInject to psge Scriptpage Script loader.jscreateElementrunDOM :: <HTML> <script> chrome_comp_injector () </script>
- 12. Detector ModelDetector AlgorithmDetector AlgorithmDetector AlgorithmaddProblemBaseDetector ClasspostAnalyze(empty)extendconstructorNonScanDomBaseDetector ClasspostAnalyzeextendScanDomBaseDetector ClasscheckNodedocument.createNodeIterator for each Nodes
- 13. JavaScript Hook ModelInputWrapSame NameNative CodeDetector CodeerrorokContinue to other codeproblemschrome_comp. CompDetect .registerExistingMethodHookchrome_comp. CompDetect .registerExistingPropertyHook
- 14. ????How to StartWrite Compatibility Detector Code
- 15. mainfest.json……"content_scripts": [ { "matches": [ "http://*/*", "https://*/*", "file://*" ], "js": [ "loader.js", "framework.js", "framework_shared.js", "base_detection.js", "config.js", "w3help_issues.js", "non_w3help_issues.js", // Detector"detectors/sample_check_node.js",……
- 16. addScriptToInject(function() {chrome_comp.CompDetect.declareDetector('sample_check_node',chrome_comp.CompDetect.ScanDomBaseDetector,functionconstructor() { this.CHECK_TAG_NAME = {SPAN: true, DIV: true, TALBE: true}; this.addProblem = function (node) { node.style.backgroundColor = 'red'; };}, // constructorfunctioncheckNode(node, context) { if (Node.ELEMENT_NODE != node.nodeType || context.isDisplayNone()) return; if (node.tagName in this.CHECK_TAG_NAME) { if (node.hasAttribute('width') || node.hasAttribute('height')) this.addProblem(node); }}); // declareDetector});ScanDomBaseDetector checkNode
- 17. addScriptToInject(function() {chrome_comp.CompDetect.declareDetector('sample_post_analyze',chrome_comp.CompDetect.NonScanDomBaseDetector,null, // constructorfunctionpostAnalyze() { var m = chrome_comp.documentMode; m.hasCommentBeforeDTD && log('There has Comment before DOCTYPE'); m.hasConditionalCommentBeforeDTD && log('There has IE conditional comment before DOCTYPE'); m.isUnusualDocType && log('There is unknown DOCTYPE'); (document.querySelectorAll('meta').length == 0) && log('This page has no Meta tag'); functionlog(str) { var t = document.createTextNode(str),p = document.createElement('p'); p.appendChild(t); document.body.appendChild(p); }}); // declareDetector});NonScanDomBaseDetector postAnalyze
- 18. addScriptToInject(function() {chrome_comp.CompDetect.declareDetector('sample_hook',chrome_comp.CompDetect.NonScanDomBaseDetector,functionconstructor() {var This = this; this.log = function(str) { var t = document.createTextNode(str),p = document.createElement('p'); p.appendChild(t); document.body.appendChild(p); }; this.evalHandler_ = function (result, originalArguments, callStack) { if (originalArguments[0].indexOf('var ') == 0) window.addEventListener('load',function() { This.log('Performed using the eval method ' + originalArguments[0] + 'statement.'); },false) };},function setUp() { chrome_comp.CompDetect.registerExistingMethodHook(window, 'eval', this.evalHandler_);},function cleanUp() { chrome_comp.CompDetect.unregisterExistingMethodHook(window, 'eval', this.evalHandler_);}); // declareDetector});NonScanDomBaseDetector Method Hook
- 19. addScriptToInject(function() {chrome_comp.CompDetect.declareDetector('sample_hook_2',chrome_comp.CompDetect.NonScanDomBaseDetector,functionconstructor() { var This = this; this.log = function(str) { var t = document.createTextNode(str),p = document.createElement('p'); p.appendChild(t); document.body.appendChild(p); }; this.handler_ =function(oldValue, newValue, reason) { if (reason == 'get') { This.log('Get document.documentMode value is ' + oldValue); } if (reason == 'set') { This.log('Set document.documentMode value is ' + newValue); } };},function setUp() { chrome_comp.CompDetect.registerSimplePropertyHook(document, 'documentMode', this.handler_);},function cleanUp() { chrome_comp.CompDetect.registerSimplePropertyHook(document, 'documentMode', this.handler_);}); // declareDetector});NonScanDomBaseDetector Property Hook
- 20. Build Your Own Test FrameworkMultiplexing Detector Files
- 21. More accurate extract the contents in browsers Kernel Detector AlgorithmDetector AlgorithmDetector AlgorithmIE BotaddProblemWebKit BotBaseDetector ClassconstructorNonScanDomBaseDetector ClassBrowsers BotpostAnalyzeJsonScanDomBaseDetector ClassBrowser APIcheckNodeC++ String implementDesktop appWeb appYour test frameworkPHP ...Local System
- 22. Compatibility Test Bot DemoD:\ProgramData\Windows\Desktop\demo>Detect.exe --url=clear_float.htmlcontent-type:problems:[{"id":"RM8002","info":{"repeatedCount":6,"occurrences":[{"details":"Problem Element height is 38px","html":["<div id=\"div1\" style=\"zoom:1;\" expectedproblems=\"RM8002\">\n div1 zoom:1;\n <div style=\"float:left;\">div float:left;</div>\n <div style=\"float:right;\">div float:right;</div>\n</div>","<div style=\"float:left;\">div float:left;</div>"],"stack":""},{"details":"Problem Element height is 16px","html":["<div id=\"div5\" style=\"height:1em;\" expectedproblems=\"RM8002\">\n div5 height:1em;\n <div style=\"float:left;\">div float:left;</div>\n <div style=\"float:right;\">div float:right;</div>\n</div>","<div style=\"float:left;\">div float:left;</div>"],"stack":""}……
- 23. Q&AMark huang, Google Chrome team