samcarter
*Background story: I dearly miss a former firefox addon that allowed to easily view a sequence of numbered images. For example if I visited the url https://raw.githubusercontent.com/samcarter/shared/master/images/5.png I could use the addon to see the images `1.png`, ..., `7.png` on a single page. Unfortunately the addon is no longer compatible with the current firefox release.*
So long story short, I tried to hack together something as replacement. The following document is probably very badly coded (I neither know html nor javascript), but so far it seems to work as expected. The only annoyance is that when I have an individual image opened in the browser I have to copy its url, then open this document, paste the url (and edit it to remove the number over which I would like to iterate, but that's no big deal).
Now I'm wondering if the copy & paste step could be skipped? I have seen examples of bookmarklets which use the current url, for example
```
javascript: void(location.href = 'http://web.archive.org/web/*/' + escape(location.href));
```
(found at https://www.thetechbasket.com/most-useful-bookmarklets/)
Can such a bookmarklet be used to replace my document? Or can a bookmarklet open my document and fill in the image url? I am not at all committed to any specific approach and open to ideas if you think a different approach would be better.
```
<!DOCTYPE html>
<html>
<head>
<title>Loop Images</title>
</head>
<body>
Start: <input type="text" name="start" id="startid" value="1" />
Stop: <input type="text" name="stop" id="stopid" value="5" />
Scale: <input type="text" name="scale" id="scaleid" value="10" />%
<p></p>
Pre: <input type="text" size=100 name="pre" id="preid" value="https://raw.githubusercontent.com/samcarter/shared/master/images/" />
<p></p>
Post: <input type="text" size=50 name="post" id="postid" value=".png" />
<p></p>
<FORM>
<INPUT Type="button" VALUE="Submit" onClick="history.go(0)">
</FORM>
<p id="demo"></p>
<script type="text/javascript">
var start = document.getElementById("startid").value;
var stop = document.getElementById("stopid").value;
var pre = document.getElementById("preid").value;
var post = document.getElementById("postid").value;
var scale = document.getElementById("scaleid").value;
var a;
for(a=start; a <= stop; a++){
demo.innerHTML+=( a + ":<img src=\"" + pre + a + post + "\" style=\"width: " + scale + "vw;\">" );
}
</script>
</body>
</html>
```
Top Answer
James Douglas
The best solution would be to create a browser extension that makes use of a sidebar. You would need to detect when the active tab changes or is updated, and update the sidebar accordingly.
1) Create a basic browser extension structure
```text
image-sequence-sidebar/
├── image.png
├── manifest.json
├── sidebar.html
└── sidebar.css
```
2) Write `manifest.json`
```json
{
"manifest_version": 2,
"name": "Image Sequence Sidebar",
"version": "1.0",
"description": "Adds a sidebar that displays similarly numbered images on a webpage",
"icons": {
"128": "image.png"
},
"sidebar_action": {
"default_title": "Images",
"default_panel": "sidebar.html",
"default_icon": "image.png"
},
"permissions": ["tabs"],
"commands": {
"_execute_sidebar_action": {
"suggested_key": {
"default": "Ctrl+Shift+I"
}
}
}
}
```
`"name": "Image Sequence Sidebar"` this defines the name of the extension on your list of extensions or on the add-ons website
`"128": "image.png"` this is the image that will be shown on your list of extensions and the add-ons website
`"default_title": "Images"` this defines the title of the sidebar that will appear above it
`"default_icon": "image.png"` this defines the icon that will appear next to the sidebar title
`"default_panel": "sidebar.html"` this is the one that defines which HTML page will be displayed in the sidebar
`"default": "Ctrl+Shift+I"` this sets the default key combination used to show or hide the sidebar
Here is MDN's page about `manifest.json`: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json
3) Write `sidebar.html`
```html
<script type="text/javascript" src="sidebar.js"></script>
```
This is all that is needed. Inline scripts aren't allowed to execute in browser extension pages, so we have to reference a JavaScript file instead.
4) Write `sidebar.js`
```javascript
let running = false;
async function getThumbs(url) {
if (!running) {
running = true;
document.body.replaceChildren();
if ( (url.indexOf('?') === -1) & (url.indexOf('#') === -1) & (url !== 'about:blank') ) {
const prefix = url.substr(0,url.lastIndexOf('/') + 1);
const extension = url.substr(url.lastIndexOf('.'));
for(let n = 1; n<100; n++) {
const thumb = prefix + n + extension;
try {
const response = await fetch(thumb);
if (response.ok) {
const a = document.createElement('a');
a.href = thumb;
const i = document.createElement('img');
i.src = thumb;
a.appendChild(i);
document.body.appendChild(a);
} else {
break;
}
} catch {
running = false;
}
}
}
running = false;
}
}
browser.tabs.onActivated.addListener(async a => {
const tab = await browser.tabs.get(a.tabId);
getThumbs(tab.url);
});
browser.tabs.onUpdated.addListener(async (tabId, changed) => {
if (changed.url) {
const tabs = await browser.tabs.query({ currentWindow: true, active: true });
if( tabs[0].id === tabId ) getThumbs(tabs[0].url);
}
});
```
`browser.tabs.onActivated` detects when the active tab changes.
`browser.tabs.onUpdated` detects when *any* tab gets updated. Then we need to check that `changed.url` exists (i.e. the thing that has updated is the url), and then check if the tab that has been updated (`tabId`) is the same one that is currently active (`tabs[0].id`).
Here is MDN's page on the WebExtensions API for tabs: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs
The function `getThumbs()` then checks for similarly numbered images on the url.
I have uploaded the extension to Mozilla Add-ons, and you can download it here: https://addons.mozilla.org/en-GB/firefox/addon/image-sequence-sidebar/
The source code is hosted here: https://github.com/JamesRDouglas/image-sequence-sidebar (feel free to submit feature request here as well)