I want to change an image on a website, so that every time I visit, it shows the image that I want it to show and not the one that it normally shows.
Does anyone have the Tampermonkey code to do this?
Just change the src attribute. For example, say your image has the id "blah":
document.getElementById("blah").src = "http://......"
If you're not just searching by id, you could use something like document.querySelector(.....) instead.
Then put this inside a TamperMonkey script and make sure your code is firing on the correct websites (the #match part of the UserScript section in your script).
The following example is a tampermonkey script that runs on all websites. The script searches for an image of a cat and replaces it with an image of a dog. This script uses jQuery to select the image and modify its value.
// ==UserScript==
// #name Image Replacer
// #version 1.1
// #description Image Replacer
// #require http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// #match https://www.pinterest.com/pin/*
// #grant none
// ==/UserScript==
/*globals $*/
var old_url = "https://i.pinimg.com/564x/21/64/6a/21646ad49e3860218f44b456153c7594.jpg"
var new_url = "https://i.pinimg.com/564x/59/9b/bb/599bbb49d7a3bb5546ff4017e9eb76ce.jpg"
$(document).ready(function(){
alert("Hi There!");
$("img[src='"+old_url+"']").attr("src", new_url);
alert("Replaced pictures successfully");
});
You can run this script on this Pinterest Website.
Related
So this is really frustrating... on the mymaths website: https://www.mymaths.co.uk/, there's an image of a primary school child on a computer with this image address: https://www.mymaths.co.uk/assets/images/big/primary-school-photo-2.jpg.
I've tried so many things, but I can't seem to replace it.
Say I wanted to replace it with a picture of a hamburger, with this address: https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100.
So far I've tried lots of threads, but this image seems to be different from images on other websites, which is why my code isn't working on it:
var images3 = document.getElementsByTagName ("img");
var i3=0;
while(i3<images3.length)
{
if(images[i3].src == "https://www.mymaths.co.uk/assets/images/big/primary-school-photo-2.jpg")
{
images[i3].src = "https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100";
}
i3=i3+1;
}
Can somebody help me please? Thank you.
Well, this was new for me too. Apparently, the <picture> tag is not just a wrapper - it's a smarter version of <img>.
It allows to chose different URLs for the image tag depending on screen size and type. For example, try to do this in developper tools:
I replaced srcset for the <source> that has (max-width: 767px), which means it is active when browser window is smaller than 767px. Now if you resize browser window to make it smaller, at some point the original image will be raplaced with burger image.
So what you want to do is to replace all <source>'s srcset. This worked for me:
// Limit the list of omages on those that are under `<picture>` tag
const images = document.querySelectorAll("picture img, picture source");
// RegExp to check if we want to replace the URL
const replaceChecker = /primary-school-photo-2\.jpg$/i;
// The replacement URL
const replaceWith = "https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100";
for(const image of images) {
// Pick the name of the attribute we want to change based on whether it's <img> or <source>
const srcAttributeName = image.tagName.toLowerCase() == "img" ? "src" : "srcset";
const oldURL = image[srcAttributeName] + "";
if(replaceChecker.test(oldURL)) {
image[srcAttributeName] = replaceWith;
}
}
You could improve that by checking the media attribute and if it says minimum screen width, use URL for smaller image of the hamburger. That is set by the w GET param in the hamburger image's URL.
I have a phantomjs script that is stepping through the pages of my site.
For each page, I use page = new WebPage() and then page.close() after finishing with the page. (This is a simplified description of the process, and I'm using PhantomJS version 1.9.7.)
While on each page, I use page.renderBase64('PNG') one or more times, and add the results to an array.
When I'm all done, I build a new page and cycle through the array of images, adding each to the page using <img src="data:image/png;base64,.......image.data.......">.
When done, I use page.render(...) to make a PDF file.
This is all working great... except that the images stop appearing in the PDF after about the 20th image - the rest just show as 4x4 pixel black dots
For troubleshooting this...
I've changed the render to output a PNG file, and have the same
problem after the 19th or 20th image.
I've outputted the raw HTML. I
can open that in Chrome, and all the images are visible.
Any ideas why the rendering would be failing?
Solved the issue. Turns out that PhantomJS was still preparing the images when the render was executed. Moving the render into the onLoadFinished handler, as illustrated below, solved the issue. Before, the page.render was being called immediately after the page.content = assignment.
For those interested in doing something similar, here's the gist of the process we are doing:
var htmlForAllPages = [];
then, as we load each page in PhantomJS:
var img = page.renderBase64('PNG');
...
htmlForAllPages.push('<img src="data:image/png;base64,' + img + '">');
...
When done, the final PDF is created... We have a template file ready, with all the required HTML and CSS etc. and simply insert our generated HTML into it:
var fs = require('fs');
var template = fs.read('DocumentationTemplate.html');
var finalHtml = template.replace('INSERTBODYHERE', htmlForAllPages.join('\n'));
var pdfPage = new WebPage();
pdfPage.onLoadFinished = function() {
pdfPage.render('Final.pdf');
pdfPage.close();
};
pdfPage.content = finalHtml;
The excellent dropdown jQuery UI Multiselect widget that supports styling via jQuery UI Themeroller still doesn't have support for including images within the drop down rows.
I didn't see any answers to this problem within Stackoverflow yet it seems to be asked regularly in various areas of the internet, so I am giving the answer to this question below..
(ALSO See my FIDDLE Example to see this in action,)
The following is based on an initial idea by 'pdlove' for introducing the use of images within this excellent UI Multiselect for jQuery.
Adding Image support for line items in check box text area is achieved by setting out the selector option rows html like this:
<option value="somevalue" image="yourimage.jpg" class="multSelktrImg">
normal visible text
</option>
I would also add a class control to your style sheet css file to set the image size being rendered in the option line items of the drop down, along with a couple of position settings for the image, label and span text.
In this example I use the class name 'multSelktrImg', so within the css file it would look something like this:
.multSelktrImg span{position: relative;top: 10px;vertical-align: middle;
display: inline-flex;}
.multSelktrImg input {vertical-align: -2px;}
.multSelktrImg img {position: relative;height: 30px;margin: 2px 6px;top: -10px;}
Now for the change in the src/jquery.multiselect.js file
Search for the following matching code around line 130 (depending on what version id of the script you are using):
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
title = this.innerHTML,
description = this.title,
....
ADD the following line above "title = this.innerHTML,":
image = this.getAttribute("image");
so that it looks like this:
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
image = this.getAttribute("image");
title = this.innerHTML,
description = this.title,
Now Search for the following matching code around line 180:
// add the title and close everything off
html += ' /><span>' + title + '</span></label></li>';
....
Replace the code line with the following to allow for rendering of your images:
// add the title and close everything off
html += ' /><span>';
if (image != null) {
html += '<img src="'+image+'" class="multSelktrImg">';
}
html += title + '</span></label></li>';
save the new version of the script src/jquery.multiselect.js file and now the images will appear in the multiselect drop down. Use the 'multSelktrImg' class value to control the size of the image displayed by altering the pixel size for the class in your css file.
In the FIDDLE version, I have altered the minimized version of the jQuery script, and created an initialisation of the Select object.
I cannot upload SVG-images as Category-Thumbnail-pictures in Magento (CE, 1.8). Just "normal" image-formats like jpg or png seem to work.
Does anybody have an idea?
You need to rewrite or modify this Model
class Mage_Catalog_Model_Category_Attribute_Backend_Image
app/code/core/Mage/Catalog/Model/Category/Attribute/Backend/Image.php
In line 60
$uploader->setAllowedExtensions(array('jpg','jpeg','gif','png','svg')); // add the file type SVG to the allowed extension array.
It will work just fine
Soltion is:
class Mage_Catalog_Model_Category_Attribute_Backend_Image
rewrite file
app/code/core/Mage/Catalog/Model/Category/Attribute/Backend/Image.php
update code
$uploader->setAllowedExtensions(array('jpg','jpeg','gif','png','svg'));
$uploader->setAllowRenameFiles(true);
// Avoid Validation for SVG
// $uploader->addValidateCallback(
// Mage_Core_Model_File_Validator_Image::NAME,
// new Mage_Core_Model_File_Validator_Image(),
// "validate"
// );
And boom , you are done!!
Since extensions can not access unsafeWindow, like Firefox can, to hook into DOM scripts am I looking for other ideas so I come to SO for help!
How about using some code to inject into DOM and sending the intercepted response to a background page, which then does some initial processing before calling a content script for final processing. When done, it answers to the background with a modified response, or the original (it depends), and the background page sends the response back to DOM which handles it to the DOM script response function.
There is just one problem with this, a background page cant communicate with the DOM.
I did a small test with injecting some code, where I output something to the console and an alert. The result wasnt good, as the alert fired but the console was empty - not even an error, which makes me wonder - what console received the output ?
function injectCode(fn){ // Executing an anonymous script
var script = document.createElement('script');
script.type = 'application/javascript';
script.textContent = '(' + fn + ')();';
document.documentElement.appendChild(script); // run the script
document.documentElement.removeChild(script); // clean up
}
var code = function(){
console.log('dom',window);
alert('code injected');
}
injectCode(code);
I also tried addEventListener, with DOMAttrModified DOMSubtreeModified DOMNodeInserted, on DOM elements that change when the DOM ajax response is fully parsed but all failed to fire.
Am I trying to do the impossible, by any means ?
Before continuing, make sure that you know the differences between the script contexts in an extension.
To inject a script from the background page, you have to execute a Content script, which on his turn injects the script as mentioned in your question / here.
Examples (using chrome.tabs.executeScript):
// null = current active tab
// Simple code, background:
chrome.tabs.executeScript(null, {
code: [
'var s = document.createElement("script");',
's.textContent = "console.log(window);";',
'(document.head||document.documentElement).appendChild(s);',
's.parentNode.removeChild(s);'
].join('\n')
});
I can imagine that this method is not doable for a big chuck of code. For a set of pre-defined scripts, you can then use two scripts: the code itself, and a helper script:
// config.js
var fn_code = function() {
console.log(window); ....
};
// helper.js
var s = document.createElement('script');
s.textContent = '(' + fn_code + ')();';
(document.head||document.documentElement).appendChild(s);
s.parentNode.removeChild(s);
// Background:
chrome.tabs.executeScript(null, {file: 'config.js'}, function() {
chrome.tabs.executeScript(null, {file: 'helper.js'});
});
Note: I did not directly link to "config.js", because that complicates the use when using manifest version 2, see "web_accessible_resources".
The previous method only shows how to execute code in one direction (background -> page). If there's a need to activate a background's function from the injected script, you have to define and listen to a custom event handler. See this answer + demo.
Because the code is injected, thus runs in the scope of the page, you have to check the console at the page.
When chrome.tabs.executeScript fails to execute the Content script (eg. because the extension does not have the permission to access a certain page), an error is logged at the console in the background page. This console can be accessed by following these steps.