Pin it is designed to be a very light weight extension for "pinning" elements to the page.
Clicking the icon toggles selection mode.
When in this mode, elements that are hovered are highlighted in red. Clicking an element selects it
After selecting an element a deep clone (element and all its children) of the element is created . This clone is put into a container div.
Containers are removed from the regular flow of the document with the position: static css property.
- The container element is resizeable via the css
resizable: bothproperty and draggable. - Dragging is accomplished with event listeners and corresponsding handlers for
mousedown,mousemove, andmouseup. - There is also a button to remove the container from the DOM.
- The style of elements is often highly dependent on the context it is in (it's parent elements). For this reason removing an element from the normal flow often results in it not appearing as it normally did. This extension does not make much of an attempt to preserve styling. It copies the
color,background-color, andfont-sizeso that at least some of the styling persists. This is not done for any of the children though. cloneNode(true)has no effect on void elements such asimgandinputelements cloneNode
- more indicators you are in selection mode (maybe opaque overlay, but how would we reach elements underneath?)
- dark theming
- attempt to preserve styles better
- save text that was pinned
- option to delete the selected element so that only the clone is on the page
- from root
npm i - then
npm run build - then
cd dist - then
web-ext build
Using Github is great or email me.
Icon by Gayrat Muminov on freeicons.io.
I changed the color to orange red (#ff4500) from periwinkle gray (#d3d4ed)