commit 9e00cb84e770d505da68a54b2e64c3be5efddf0a Author: Rumperuu Date: Wed Jul 18 10:43:03 2018 +0100 Rename repo diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..67249e3 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.xpi \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..de2dee8 --- /dev/null +++ b/README.md @@ -0,0 +1,26 @@ +# Pinpointer + +Pinpointer is a browser extension that allows you to create and share links to arbitrary content on a webpage. + +You can read more about the extension on my website [here](https://bengoldsworthy.net/program/pinpointer/). + +## Use + +After installing the extension, an icon will appear in your browser toolbar. Select an element on a web page and click the icon, then click the first button to select that element. Fine-tune your choices, and then click the second button to generate the link. + +With the extension installed, any received Pinpoint links will automatically highlight the element selected. The links are backwards compatible, so you don't have to worry about the recipient using the extension or not. + +## Future Improvements + +### Major + +* Add an options menu so a user can specify (for example) how they want elements in Pinpoint links that they receive to be highlighted. +* Look at ways of modifying `getPath()` to produce shorter selectors. +* Make it look less ugly. +* Find an efficient method of making every element _except_ the highlighted one low-opacity? Previous attempts to do so would make the highlighted element's parent low-opacity, and you can't make a child more opaque than its parent. +* Move repo off of GitHub. + +### Minor + +* Add a button to cancel element highlighting when recieving a Pinpointer link. +* Should the first button on the form be removed, and just have clicking the Pinpointer icon go straight to the selector specification stage? \ No newline at end of file diff --git a/content_scripts/checkPage.js b/content_scripts/checkPage.js new file mode 100644 index 0000000..26bcae6 --- /dev/null +++ b/content_scripts/checkPage.js @@ -0,0 +1,25 @@ +/** + Title: Pinpointer + Version: 1.0 + Author: Ben Goldsworthy + + 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); + } +})(); diff --git a/content_scripts/pinpointer.js b/content_scripts/pinpointer.js new file mode 100644 index 0000000..970609f --- /dev/null +++ b/content_scripts/pinpointer.js @@ -0,0 +1,140 @@ +/** + Title: Pinpointer + Version: 1.0 + Author: Ben Goldsworthy + + 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