Compatibility Detector Tool of Chrome extensions

Compatibility Detector Tool of Chrome extensionsTapir 2011-05-07

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/

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.

Extensions Featureschrome.*APICross-Origin XMLHttpRequesDesktop NotificationJavaScriptand DOM APIHTML5<canvas> <audio> <video> ……localStorageWeb DatabaseCSS 3CSS Selector……

Working principle of extensionsExtension ProcessPage ProcessBackground PageContent ScriptPage DOMIPCPage ScriptPopup PageIPCPage ProcessContent ScriptPage DOMOther HTML PagePage Script

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

Compatibility Detector Filesmanifase.jsonbackground.htmlpopup.htmlloader.jsbase_detection.jsframework_shared.jsframework.jsdetectors/*.jsExtension ProcessPage Process Page Process ContentScript ContextPage Script Context

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>

Detector ModelClasschrome_comp.CompDetect.declareDetectorchrome_comp.CompDetect.ScanDomBaseDetectorchrome_comp.CompDetect.NonScanDomBaseDetectorMethodsconstructorcheckNodepostAnalyze

Detector ModelDetector AlgorithmDetector AlgorithmDetector AlgorithmaddProblemBaseDetector ClasspostAnalyze(empty)extendconstructorNonScanDomBaseDetector ClasspostAnalyzeextendScanDomBaseDetector ClasscheckNodedocument.createNodeIterator for each Nodes

JavaScript Hook ModelInputWrapSame NameNative CodeDetector CodeerrorokContinue to other codeproblemschrome_comp. CompDetect .registerExistingMethodHookchrome_comp. CompDetect .registerExistingPropertyHook

????How to StartWrite 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'; };}, // 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

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

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 FrameworkMultiplexing Detector Files

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

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":""}……

Q&AMark huang, Google Chrome team

Compatibility Detector Tool of Chrome extensions

More Related Content

What's hot

More from Kai Cui

Recently uploaded

Compatibility Detector Tool of Chrome extensions