Is it possible to write a Chrome extension that shows images ONLY on a page (hides all text), when the plugin is enabled?
There are plugins available that hide all images. I need the opposite: a page with just the images, and all text hidden.
Ideally, this behavior should also be restricted to some location on the page (e.g., inside a particular DIV), but that's not a requirement.
If you want to hide all html tags but img then, yes, it's possible and is very easy to do. You can do this using a content style that overwrites the CSS of the target page and hide everything except images tags.
Here is how you can do it:
manifest.json:
{
"name": "Test extension",
"version": "0.0.1",
"manifest_version": 2,
"description": "Some description",
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
},
"default_locale": "en",
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"css" : [
"styles/contentstyle.css"
],
"run_at": "document_end"
}
]
}
scripts/contentstyle.css
body {
visibility: hidden;
}
* img {
visibility: visible;
}
Note that this CRX won't show images set as a background-image through CSS, only the img tags.
Related
How can I blur images and videos in google chrome and to manage the websites that will be affected from this extenstion?
I saw this extension: https://chrome.google.com/webstore/detail/blur-the-image-and-video/aikjogmpaoaookmacnkbenekcnkjlkmi/related
But there is only two options in this extension: TURN ON or TURN OFF (to all the websites, but I want to be able to decide which sites not to run it on ("white list")).
Someone meet some extension that can do it ?
This extension blurs images and videos on sites that exclude exclude_matches.
manifest.json
{
"name": "hoge",
"version": "1.0",
"manifest_version": 3,
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"exclude_matches": ["*://hoge.com/*"],
"css": [
"matches.css"
]
}
]
}
matches.css
img, video {
filter: blur(4px);
}
I am new to chrome-extension and currently studying it. Im reading http://talks.codegram.com/creating-basic-chrome-extensions#/basic_example_4 the css tweaks already works but not with the changing of image...
mainifest.json
{
"name": "TrollFaces",
"version" : "0.0.1",
"manifest_version" : 2,
"description": "Must turn Codegram team members pics into troll faces.",
"permissions": ["tabs", "http://*/*", "background"],
"browser_action": {"default_icon": "16x16.png","default_popup": "popup.html"},
"content_scripts": [
{
// Change 'matches' attribute to load content
// script only in pages you want to.
"js": ["jquery.min.js", "contentscript.js"],
"matches": ["http://*/*"],
"css": ["basics.css"]
}
]
}
contentscript.js
$(document).ready(function() {
// Trollface image must be at 'my_extension/images/trollface.jpg'.
var trollface = chrome.extension.getURL("images/trollface.jpeg");
$('#content article img').each(function(index, image){
$(image).attr('src', trollface);
});
});
using inspect element over the photo which is not displaying
<img alt="Txus" height="150" src="chrome-extension://fdigngaajlfopnpffgcapbdekkbicngb/images/trollface.jpeg" width="225">
In order for the image (or any resource) to be "usable in the context of a web page" you have to declare it as a web accessible resource in the relevant section of your manifest.json. E.g.:
In manifest.json:
...
"web_accessible_resources": [
"images/trollface.jpeg"
],
...
I am using the following code to access the background page function in google chrome
popup.html
function sendRequest(ea,eb)
{
console.log("Inside");
chrome.extension.sendRequest({ea:ea,eb:eb},
function(response)
{
alert(response.farewell);
});
}
background.html
<html>
<body>
<script>
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
sendResponse({farewell: "goodbye"});
})
</html>
</body>
</script>
manifest.json
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"background": {
"page": "background.html"
},
"content_scripts": [
{
"matches": ["http://*/"],
"js": ["popup.js"]
}
],
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "mine.html"
},
"permissions": [
"tabs","http://*/","background"
],
"web_accessible_resources": ["loading.html","bu.png"]
}
However it does not print the alert. Can anyone tell me what i am doing wrong here?
Your HTML for background.html is extremely malformed and should be fixed;
<html>
<body>
<script>
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
sendResponse({farewell: "goodbye"});
})
</script>
</body>
</html>
Tags should be closed in the reverse order of them being open to maintain a correct hierarchy. Since you had not done so, the <script> element was malformed and contained invalid syntax </html></body> so would not be executed correctly.
Since you're using version 2 of the manifest you may want to consider abstracting the contents of this script element (ignoring all HTML) to its own file (e.g. background.js) and change your manifest to the following;
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"minimum_chrome_version": "18",
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["http://*/"],
"js": ["popup.js"]
}
],
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "mine.html"
},
"permissions": [
"tabs","http://*/","background"
],
"web_accessible_resources": ["loading.html","bu.png"]
}
Notice that the background property now contains an array of strings representing JavaScript files to be loaded (in the order specified) in to a dynamically generated background page.
I've also set the minimum_chrome_version property to 18 as manifest version 2 should only be used when targeting this version of Chrome and above.
Developers should now only really need to use background pages instead of scripts when they need to support older versions of Chrome.
Edit
It just clicked that you're attempting to execute embedded JavaScript within your background page. Manifest version 2 introduces Content Security Policies which prohibit the execution of inline (e.g. onclick="showDialog();" and href="javascript:void(0);") and embedded JavaScript. This is why your background.html won't work and why background.js will. You will also want to ensure your popup.html doesn't contain any embedded JavaScript. The best workaround (and generally best practice anyway) is to abstract all JavaScript into its own file (e.g. popup.js) which is referenced by the HTML file. For example;
<script src="/popup.js"></script>
I'm trying to make my first Chrome extension. Basically, the idea is to make a coloured filter that covers every page. (I have a monitor that won't get any darker, so I want to put a translucent black filter over every site I visit.)
From my understanding, I can run javascript by using a "Content script," with the script executing on every page. This is my manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["mystyles.css"],
"js": ["contentscript.js"]
}
]
}
I want to do something like this: http://jsfiddle.net/GM2Z6/14/
Great, so I've gotten that far, by making mystyles.css like this:
#cover {
height:100%;
width:100%;
background-color:#000;
display:none;
position:absolute;
top:0;
left:0;
z-index:99999999;
}
And I've got my contentscript.js looking like this:
$(function(){
$('#cover').fadeTo("fast",0.5);
});
So now how do I make my #cover div overlay on top of the page?
A couple of things...As rvmook said, you didnt include jquery and you also never create the div in the page.
Following is some code that works. Notice in the css I changed a couple of things...Position is now "fixed", otherwise your div scrolls with the page and pointer-events:none; allows you to click through the div to the elements below it. Also now rely on the content scripts "run_at" option to decide when to run the script and not jquery, because I dont know what document_end is in jquery.
manifest.json
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["mystyles.css"],
"js": ["jquery-1.7.1.min.js","contentscript.js"] ,
"run_at" : "document_end"
}
]
}
mystyles.css
#cover {
height:100%;
width:100%;
background-color:#000;
display:none;
position:fixed;
top:0;
left:0;
z-index:99999999;
pointer-events:none;
}
contentscript.js
(function(){
$('<div/>', {
id: 'cover'
}).appendTo(document.documentElement);
$('#cover').fadeTo("fast",0.5);
})();
It seems that you haven't inlcuded jQuery in your content_scripts. Even if the website you're injecting your code in has jQuery itself, you can't access it with your Extension, so that's why it should also be included in your content_scripts.
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["mystyles.css"],
"js": ["contentscript.js", "your/path/to/jquery-1.7.1.min.js"]
}
What I'm working on is I have a div with a black background and I wanna be able to click, and drag it. I'm using JQuery UI, and well I can't seem to figure out how to do it.
When the icon for the div is clicked it toggles to show/hide, and I wanna be able to click, and drag it over a web page. Later on this will be helpful for calculators, stopwatches, etc: but I can't seem to figure out how to have the div show/hide nor how to be able to drag it.
Any help would be much appreciated.
manifest:
{
"name": "DIV Drag Test",
"version": "0.0.1",
"description": "DIV Drag Test",
"background_page": "background.html",
"permissions": ["http://*/*", "tabs"],
"icons": {
"48": "logo.png"
},
"browser_action": {
"default_icon": "logo.png",
"default_title": "DIV Drag Test"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"css": ["style.css"],
"js": ["js/jquery.js", "js/jquery-ui.js"]
}
]
}
css:
div#test8935 {
cursor:pointer;
width:320px;
height:240px;
background-color:#000;}
background.html
<script>
$(document).ready(function() {
$('div#test8935').draggable();
chrome.browserAction.onClicked.addListener(function(tab) {
$('div#test8935').toggle(350);
});
});
It has been a little while since I have done Chrome extension development, but these are my initial thoughts based on what I remember.
It looks like you are trying to manipulate a div on a website through background.html. Are you sure you don't want to be targeting a content script instead? Background has no interface and will never interact directly with a page.
So what I think you want to do is move your script from background.html into a new js file and include it with your contentscript js params.
"content_scripts": [
{
"matches": ["http://*/*"],
"css": ["style.css"],
"js": ["js/jquery.js", "js/jquery-ui.js", "contentscript.js"]
}