Rename repo
This commit is contained in:
Rumperuu
commit
9e00cb84e7
14 changed files with 451 additions and 0 deletions
25
content_scripts/checkPage.js
Normal file
25
content_scripts/checkPage.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
Title: Pinpointer
|
||||
Version: 1.0
|
||||
Author: Ben Goldsworthy <me@bengoldsworthy.net>
|
||||
|
||||
This file is a part of Pinpointer, a browser extension that allows you to
|
||||
create and share links to arbitrary content on a webpage.
|
||||
|
||||
This script highlights elements when provided with a Pinpointer link.
|
||||
*/
|
||||
(function() {
|
||||
/**
|
||||
* Check if an extension-compatible fragment identfier is present (and that
|
||||
* it's not just a regular identifier). If it is, then scroll the page to
|
||||
* the correct element and style it.
|
||||
*/
|
||||
var currentElement = window.location.href.split('#')[1];
|
||||
if ((typeof currentElement != 'undefined') && (document.querySelector(":target") == null)) {
|
||||
currentElement = atob(decodeURIComponent(currentElement));
|
||||
elem = document.querySelector(currentElement);
|
||||
elem.scrollIntoView(true);
|
||||
elem.style.cssText = "background-color: lightgreen; border: 2px dashed green;";
|
||||
window.scrollBy(0, -50);
|
||||
}
|
||||
})();
|
||||
140
content_scripts/pinpointer.js
Normal file
140
content_scripts/pinpointer.js
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
/**
|
||||
Title: Pinpointer
|
||||
Version: 1.0
|
||||
Author: Ben Goldsworthy <me@bengoldsworthy.net>
|
||||
|
||||
This file is a part of Pinpointer, a browser extension that allows you to
|
||||
create and share links to arbitrary content on a webpage.
|
||||
|
||||
This script runs in the browser windo and selects elements to pass on to the
|
||||
extension popup menu.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
/**
|
||||
* Protects against multiple injections of the same content script.
|
||||
*/
|
||||
if (window.hasRun)
|
||||
return;
|
||||
window.hasRun = true;
|
||||
|
||||
var firstRun = true;
|
||||
|
||||
// Creates a stylesheet used for highlighting selected elements.
|
||||
// Source: https://davidwalsh.name/add-rules-stylesheets
|
||||
var sheet = (function() {
|
||||
// Create the <style> tag
|
||||
var style = document.createElement("style");
|
||||
|
||||
// WebKit hack :(
|
||||
style.appendChild(document.createTextNode(""));
|
||||
|
||||
// Add the <style> element to the page
|
||||
document.head.appendChild(style);
|
||||
|
||||
return style.sheet;
|
||||
})();
|
||||
|
||||
|
||||
/**
|
||||
* This function has been _heavily_ adapted from the `jquery-getpath.js`
|
||||
* plugin, released under the MIT License by Dave Cardwell.
|
||||
*
|
||||
* The original plugin can be found at:
|
||||
* http://davecardwell.co.uk/javascript/jquery/plugins/jquery-getpath/
|
||||
*/
|
||||
function getPath(path, elem) {
|
||||
// If this elem is an `<html>` node, we've reached the end of the path.
|
||||
if (elem.tagName == 'HTML')
|
||||
return 'html' + path;
|
||||
|
||||
// Get the elem's tag name and (if applicable, and only the former if
|
||||
// possible), ID and class names.
|
||||
var cur = elem.tagName.toLowerCase();
|
||||
if (elem.id != "") {
|
||||
cur += '#' + elem.id;
|
||||
} else {
|
||||
var classes = elem.className;
|
||||
|
||||
if (classes != "")
|
||||
cur += '.' + classes.trim().split(/[\s\n]+/).join('.');}
|
||||
|
||||
|
||||
// Recurse up the DOM.
|
||||
return getPath(' > ' + cur + path, elem.parentNode);
|
||||
}
|
||||
|
||||
/**
|
||||
* Listen for messages from the popup script.
|
||||
* Upon receiving them, either send the path for the currently-selected page
|
||||
* element or highlight the new element.
|
||||
*/
|
||||
browser.runtime.onMessage.addListener(
|
||||
function(message, sender, sendResponse) {
|
||||
switch(message.type) {
|
||||
// In this case, send back the path that uniquely identifies the
|
||||
// currently-selected element.
|
||||
case "grabElement":
|
||||
// Check if anything is actually selected first.
|
||||
var selection = window.getSelection();
|
||||
if (selection.anchorOffset != selection.focusOffset) {
|
||||
// If it is, get the path to the selected element.
|
||||
var elem = selection.anchorNode.parentNode;
|
||||
var path = getPath("", elem);
|
||||
|
||||
// If the given path selector does not uniquely specify a single
|
||||
// element, replace the class selectors for the final element
|
||||
// with an `:nth-of-type()` psuedo-selector.
|
||||
if (document.querySelectorAll(path).length > 1) {
|
||||
// Get the last element's type, shorn of class selectors.
|
||||
var tmpPath = path.split(" > ");
|
||||
var lastElem = tmpPath.pop().split(".")[0];
|
||||
path = tmpPath.join(" > ");
|
||||
path += " > " + lastElem;
|
||||
|
||||
// Find all its same-type siblings, enumerate them and figure
|
||||
// out which number our element is.
|
||||
var sibs = document.querySelectorAll(path);
|
||||
sibs.forEach(function(currentValue, currentIndex, listObj) {
|
||||
if (currentValue.isEqualNode(elem)) {
|
||||
path += ":nth-of-type(" + (currentIndex + 1) + ")";
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
sendResponse(path);
|
||||
highlight(path);
|
||||
} else {
|
||||
sendResponse(null);
|
||||
}
|
||||
break;
|
||||
case "highlightElement":
|
||||
highlight(message.selector);
|
||||
break;
|
||||
default:
|
||||
console.error("Unrecognised message: ", message);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Highlight an element, given a selector.
|
||||
*/
|
||||
function highlight(selector) {
|
||||
if (!firstRun) sheet.deleteRule(0);
|
||||
else firstRun = false;
|
||||
sheet.insertRule(selector + " { opacity: 0.7; border: 2px dashed green; }");
|
||||
}
|
||||
|
||||
/**
|
||||
* When focus returns to the tab (i.e. the user clicks off of the pop-up),
|
||||
* clear any element highlighting.
|
||||
*/
|
||||
window.addEventListener("focus", function(event) {
|
||||
if (!firstRun) {
|
||||
sheet.deleteRule(0);
|
||||
firstRun = true;
|
||||
}
|
||||
}, false);
|
||||
|
||||
})();
|
||||
Reference in a new issue