Permalink
Browse files

initial commit

  • Loading branch information...
0 parents commit a15808ee7939ff6391ae50eadcaf62328d2e8240 @amphro amphro committed Aug 15, 2011
Showing with 769 additions and 0 deletions.
  1. +51 −0 ElementContainer.js
  2. +22 −0 LICENSE.txt
  3. +2 −0 README
  4. +266 −0 XPathBox.js
  5. +39 −0 background.html
  6. +85 −0 boxes.css
  7. BIN icon-128.png
  8. BIN icon-16.png
  9. BIN icon-19.png
  10. BIN icon-48.png
  11. BIN icon.png
  12. +264 −0 main.js
  13. +24 −0 manifest.json
  14. +16 −0 messager.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2011 Thomas Dvornik
+ * All rights reserved.
+ *
+ */
+
+function ElementContainer(ele) {
+ this.element = ele;
+ this.oldBorder = ele.style.border;
+ this.oldBgColor = ele.style.background;
+ this.offsets = this.getOffset();
+
+ this.overlay = document.createElement('div');
+ this.overlay.setAttribute('class','xpathElementOverlay');
+ this.overlay.style.left = this.offsets.left+'px';
+ this.overlay.style.top = this.offsets.top+'px';
+ this.overlay.style.width = this.element.offsetWidth+'px';
+ this.overlay.style.height = this.element.offsetHeight+'px';
+ this.overlay.style.display = 'none';
+ document.body.appendChild(this.overlay);
+}
+
+ElementContainer.prototype.highlight = function() {
+ this.element.style.border = 'solid 1px black';
+ //this.element.style.background = 'yellow';
+ this.overlay.style.display = 'none';
+};
+
+ElementContainer.prototype.select = function() {
+ this.element.style.border = 'solid 1px red';
+ //this.element.style.background = 'red';
+ this.overlay.style.display = '';
+};
+
+ElementContainer.prototype.clear = function() {
+ this.element.style.border = this.oldBorder;
+ //this.element.style.background = this.oldBgColor;
+ document.body.removeChild(this.overlay);
+};
+
+ElementContainer.prototype.getOffset = function() {
+ var el = this.element;
+ var _x = 0;
+ var _y = 0;
+ while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
+ _x += el.offsetLeft - el.scrollLeft;
+ _y += el.offsetTop - el.scrollTop;
+ el = el.offsetParent;
+ }
+ return { top: _y, left: _x };
+}
@@ -0,0 +1,22 @@
+Copyright (c) 2011 Thomas Dvornik (http://www.thomasdvornik.com)
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
2 README
@@ -0,0 +1,2 @@
+Extension can be installed at
+https://chrome.google.com/webstore/detail/oemacabgcknpcikelclomjajcdpbilpf
@@ -0,0 +1,266 @@
+/*
+ * Copyright (C) 2011 Thomas Dvornik
+ * All rights reserved.
+ *
+ */
+
+function XPathBox() {
+ this.element = document.createElement('div');
+ this.element.setAttribute('id', 'xpathBox');
+ this.element.style.left = '100px';
+ this.element.style.top = '100px';
+
+ this.titleEle = document.createElement('span');
+ this.titleEle.setAttribute('id', 'xpathBoxTitle');
+ this.titleEle.innerHTML = 'Enter xPath: ';
+ this.element.appendChild(this.titleEle);
+
+ function find() {
+ var userInput = document.getElementById('xpathInput').value;
+ if (userInput) {
+ var count = 0;
+ if (document.getElementById('cssselectorBox').checked) {
+ console.log("CSS Selector: " + userInput);
+ count = cssSearch(userInput);
+ } else {
+ console.log("xPath: " + userInput);
+ count = xpathSearch(userInput);
+ }
+ var disWarn = count > 9 ? ', but only showing 10. Please refine your search.' : '.';
+ console.log("Search returned " + count + " results" + disWarn);
+ }
+ };
+
+ this.input = document.createElement('input');
+ this.input.setAttribute('id', 'xpathInput');
+ this.input.setAttribute('type', 'text');
+ this.input.setAttribute('name', 'inputbox');
+
+ this.input.onkeypress = function(event) {
+ if(event.keyCode == 13){
+ find();
+ }
+ };
+ this.element.appendChild(this.input);
+
+ this.button = document.createElement('input');
+ this.button.setAttribute('type', 'button');
+ this.button.setAttribute('name', 'button');
+ this.button.setAttribute('value', ' Find ');
+
+ this.button.onclick = find;
+
+ this.element.appendChild(this.button);
+
+ this.useCssDiv = document.createElement('span');
+ this.useCssDiv.innerHTML = "Use CSS:";
+
+ this.useCssDiv.setAttribute('id', 'useCssDiv');
+
+ this.cssCheckbox = document.createElement('input');
+ this.cssCheckbox.setAttribute('id', 'cssselectorBox');
+ this.cssCheckbox.setAttribute('type', 'checkbox');
+ this.cssCheckbox.setAttribute('name', 'cssselector');
+ this.cssCheckbox.setAttribute('alt', 'Enable CSS');
+
+ var checkbox = this.cssCheckbox;
+ var title = this.titleEle;
+
+ chrome.extension.sendRequest({att: "get", param: 'useCssSelectors'},
+ function(response) {
+ if (response.val === 'true') {
+ checkbox.checked = true;
+ title.innerHTML = 'Enter CSS: ';
+ }
+ });
+
+ function changeSearchTitle() {
+ var box = document.getElementById('xpathBoxTitle');
+ var checked = document.getElementById('cssselectorBox').checked;
+ if (checked) {
+ box.innerHTML = "Enter CSS: ";
+ } else {
+ box.innerHTML = "Enter xPath: ";
+ }
+ chrome.extension.sendRequest({att: "set", param: 'useCssSelectors', val: checked},
+ //TODO: Add some sort of error handeling?
+ function(response) {});
+ }
+
+ this.cssCheckbox.onclick = changeSearchTitle;
+
+ this.useCssDiv.appendChild(this.cssCheckbox);
+ this.element.appendChild(this.useCssDiv);
+
+ this.error = document.createElement('div');
+ this.error.setAttribute('class', 'xpathError');
+ this.error.setAttribute('style', 'display: none');
+ this.element.appendChild(this.error);
+
+ this.output = document.createElement('div');
+ this.output.setAttribute('width', '500px');
+ this.element.appendChild(this.output);
+
+ this.count = 0;
+
+ this.offsetx;
+ this.offsety;
+ this.nowX;
+ this.nowY;
+ this.movable = false;
+ this.visable = true;
+
+ this.foundElements = new Array();
+}
+
+XPathBox.prototype.highlightFoundElements = function(clearFoundElements) {
+ for (var i = 0; i < this.foundElements.length; i++) {
+ this.foundElements[i].highlight();
+ }
+}
+
+XPathBox.prototype.clearHighlights = function(clearFoundElements) {
+ clearFoundElements = typeof(clearFoundElements) != 'undefined' ? clearFoundElements : true;
+ for (var i = 0; i < this.foundElements.length; i++) {
+ this.foundElements[i].clear();
+ }
+ if (clearFoundElements) {
+ this.foundElements = new Array();
+ }
+};
+
+XPathBox.prototype.setOutput = function() {
+ this.output.innerHTML = 'Output:\n';
+};
+
+XPathBox.prototype.clearOutput = function() {
+ this.output.innerHTML = '';
+ this.clearHighlights();
+};
+
+XPathBox.prototype.setError = function(errorMsg) {
+ this.error.setAttribute('style', 'display: block');
+ this.error.innerHTML = errorMsg;
+};
+
+XPathBox.prototype.clearError = function() {
+ this.error.setAttribute('style', 'display: none');
+ this.error.innerHTML = '';
+ this.count = 0;
+};
+
+/**
+ * Append a row to the xPath box output in the following format.
+ * <number>. [output]
+ */
+XPathBox.prototype.appendOutput = function(elementOrText, origElement) {
+ this.count++;
+ var container = document.createElement('div');
+ container.setAttribute('class', 'xpathFoundContainer');
+
+ var number = document.createElement('div');
+ number.innerHTML = this.count + '.';
+ number.setAttribute('class', 'xpathFoundNumber');
+
+ var text = document.createElement('div');
+ text.innerHTML = elementOrText + '&nbsp;';
+ text.setAttribute('class', 'xpathFoundStyle');
+
+ container.appendChild(number);
+ container.appendChild(text);
+
+ this.output.appendChild(container);
+
+ if (origElement instanceof HTMLElement) {
+ var eleCont = new ElementContainer(origElement);
+ eleCont.highlight();
+ this.foundElements.push(eleCont);
+ container.onmouseover = function() {
+ eleCont.select();
+ };
+ container.onmouseout = function() {
+ eleCont.highlight();
+ };
+ }
+};
+
+/**
+ * Determines if the given element part of the xPath box
+ */
+XPathBox.prototype.isXPathBoxSelected = function(element) {
+ return element != this.input && element != this.button
+ && (element == this.element || element == this.output);
+};
+
+/**
+ * Sets the offset values so the xPath box will move from the current
+ * possition
+ */
+XPathBox.prototype.setOffset = function(x, y) {
+ this.offsetx = x;
+ this.offsety = y;
+
+ var temp = this.element.style.left;
+ temp = temp.substring(0, temp.length - 2);
+ this.nowX = parseInt(temp);
+ temp = this.element.style.top;
+ temp = temp.substring(0, temp.length - 2);
+ this.nowY = parseInt(temp);
+};
+
+/**
+ * Move the xPath box. NOTE: Must call setOffset first!!
+ */
+XPathBox.prototype.move = function(x, y) {
+ this.element.style.left = (this.nowX + x - this.offsetx) + 'px';
+ this.element.style.top = (this.nowY + y - this.offsety) + 'px';
+};
+
+/**
+ * Hide the xPath box
+ */
+XPathBox.prototype.hide = function() {
+ this.element.style.visibility = "hidden";
+ this.clearHighlights(false);
+};
+
+/**
+ * Show the xPath box
+ */
+XPathBox.prototype.show = function() {
+ this.element.style.visibility = "visible";
+ this.highlightFoundElements();
+};
+
+/**
+ * Hide/Show the xPath box
+ */
+XPathBox.prototype.toggleVisability = function() {
+ this.visable = !this.visable;
+ if (this.visable) {
+ this.show();
+ } else {
+ this.hide();
+ }
+};
+
+/**
+ * Determine if the xPath box is a parent of the given element by
+ * following and checking the element's parent's id.
+ */
+XPathBox.prototype.isParent = function(ele) {
+ if (ele.id == 'xpathBox') {
+ return true;
+ }
+ for (;ele = ele.parentNode;) {
+ if (ele.id == 'xpathBox') {
+ return true;
+ }
+ }
+ //while (ele) {
+ // if (ele == this.element)
+ // return true;
+ // ele = ele.parentNode;
+ //}
+ return false;
+};
@@ -0,0 +1,39 @@
+<script>
+/*
+ * Copyright (C) 2011 Thomas Dvornik
+ * All rights reserved.
+ *
+ */
+
+ chrome.browserAction.onClicked.addListener(function(tab) {
+ chrome.tabs.sendRequest(tab.id, {browserAction: "clicked"}, function(response) {
+ if (response.error == "load") {
+ chrome.tabs.insertCSS(null, {
+ file : "boxes.css"
+ });
+ chrome.tabs.executeScript(null, {
+ file : "XPathBox.js"
+ });
+ chrome.tabs.executeScript(null, {
+ file : "ElementContainer.js"
+ });
+ chrome.tabs.executeScript(null, {
+ file : "main.js"
+ });
+ }
+ });
+ });
+
+ chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
+ if (request.att == 'get') {
+ sendResponse({val: localStorage[request.param]});
+ }
+ else if (request.att == 'set') {
+ localStorage[request.param] = request.val;
+ sendResponse({});
+ }
+ else
+ sendResponse({}); // snub them.
+ });
+</script>
+
Oops, something went wrong.

0 comments on commit a15808e

Please sign in to comment.