Compatibility Detector Tool of Chrome extensions

Compatibility Detector Tool of Chrome extensions Tapir 2011-05-07

Compatibility Detector Project 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. Compatibility Detectorhttps://chrome.google.com/webstore/detail/fcillahbnhlpombgccogflhmgocfifma Source Codehttps://code.google.com/p/compatibility-detector/

Degree of project completion Check the actual document mode in browser Check CSS box model Check new block formatting context and IE hasLayout Check MARQUEE's element Check CENTER tag Check "disabled" attribute Check ': before' and ': after' pseudo-elements Check document.createElement method Check document.all …… the total number of about 30 completed, launch 14. Objectives: Detection W3Help all compatibility root causes.

Extensions Features chrome.*API Cross-Origin XMLHttpReques Desktop Notification JavaScriptand DOM API HTML5 <canvas> <audio> <video> …… localStorage Web Database CSS 3 CSS Selector ……

Working principle of extensions Extension Process Page Process Background Page Content Script Page DOM IPC Page Script Popup Page IPC Page Process Content Script Page DOM Other HTML Page Page Script

Content ScriptProcess Model Content Script Process C++ DOM Object V8 Global Context (EcmaScript Environment) Execution flow ExtensionsDOMHandler Content Script Run Deferrer Can not Access V8 Global Context (EcmaScript Environment) append Global Context Page Script Page Script Process

Compatibility Detector Files manifase.json background.html popup.html loader.js base_detection.js framework_shared.js framework.js detectors/*.js Extension Process Page Process Page Process ContentScript Context Page Script Context

Message Model Popup.html Other HTML page background.html extension.sendRequest extension.onRequest Page contentScript framewrok.js framework_shared.js Detectors/*.js EventListener framework_shared.js Custom Event dispatch Inject to psge Script page Script loader.js createElement run DOM :: <HTML> <script> chrome_comp_injector () </script>

Detector Model Class chrome_comp.CompDetect.declareDetector chrome_comp.CompDetect.ScanDomBaseDetector chrome_comp.CompDetect.NonScanDomBaseDetector Methods constructor checkNode postAnalyze

Detector Model Detector Algorithm Detector Algorithm Detector Algorithm addProblem BaseDetector Class postAnalyze(empty) extend constructor NonScanDomBaseDetector Class postAnalyze extend ScanDomBaseDetector Class checkNode document.createNodeIterator for each Nodes

JavaScript Hook Model Input Wrap Same Name Native Code Detector Code error ok Continue to other code problems chrome_comp. CompDetect .registerExistingMethodHook chrome_comp. CompDetect .registerExistingPropertyHook

???? How to Start Write Compatibility Detector Code

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", ……

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'; }; }, // constructor functioncheckNode(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

addScriptToInject(function() { chrome_comp.CompDetect.declareDetector( 'sample_post_analyze', chrome_comp.CompDetect.NonScanDomBaseDetector, null, // constructor functionpostAnalyze() { 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

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

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

Build Your Own Test Framework Multiplexing Detector Files

More accurate extract the contents in browsers Kernel Detector Algorithm Detector Algorithm Detector Algorithm IE Bot addProblem WebKit Bot BaseDetector Class constructor NonScanDomBaseDetector Class Browsers Bot postAnalyze Json ScanDomBaseDetector Class Browser API checkNode C++ String implement Desktop app Web app Your test framework PHP ... Local System

Compatibility Test Bot Demo D:rogramDataindowsesktopemo>Detect.exe --url=clear_float.html content-type: problems: [{"id":"RM8002","info":{"repeatedCount":6,"occurrences":[{"details":"Problem Ele ment height is 38px","html":["<div id=quot;div1quot; style=quot;zoom:1;quot; expectedproblem s=quot;RM8002quot;> div1 zoom:1; <div style=quot;float:left;quot;>div float:left;</div > <div style=quot;float:right;quot;>div float:right;</div></div>","<div style=quot;f loat:left;quot;>div float:left;</div>"],"stack":""},{"details":"Problem Element hei ght is 16px","html":["<div id=quot;div5quot; style=quot;height:1em;quot; expectedproblems=quot; RM8002quot;> div5 height:1em; <div style=quot;float:left;quot;>div float:left;</div > <div style=quot;float:right;quot;>div float:right;</div></div>","<div style=quot;f loat:left;quot;>div float:left;</div>"],"stack":""}……

Q&A Mark huang, Google Chrome team

Compatibility Detector Tool of Chrome extensions

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Compatibility Detector Tool of Chrome extensions

Similaire à Compatibility Detector Tool of Chrome extensions (20)

Plus de Kai Cui

Plus de Kai Cui (6)

Dernier

Dernier (20)

Compatibility Detector Tool of Chrome extensions