Auto change html attributes on page load
I am trying to create a custom google chrome theme (image displayed in a new tab). However, there are these last recently visited blocks blocking part of the image and trying as best I could, I cannot find an extension or theme on the internet that can get rid of them. I know what changes need to be made to achieve this; The HTML page contains the following line:
<div id="mv-tiles" style="opacity: 1;"> == $0
and I just need to change style
to "opacity: 0;"
. I could do this with static HTML from Excel (using getElementById("mv-tiles").style = "opacity: 0;"
or something like that)
But how do I do it dynamically, whenever I open a new tab, not from Excel, just with my .JSON file from a chrome theme or some addon?
Update
I just pasted the provided code into my JSON file as shown below - I then created the file in notepad where I pasted the JS code, saved it as content.js
. Finally, I dragged the entire folder into the chrome extensions page to save it as a .crx package and then install. Here's my finished manifest.json
file:
{
"manifest_version": 2,
"permissions": [
"<all_urls>"
],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"content.js"
],
"run_at": "document_end"
}
],
"theme": {
"images": [],
"colors": {
"frame": [
66,
116,
201
],
"toolbar": [
223,
223,
223
],
"tab_text": [
0,
0,
0
],
"tab_background_text": [
64,
64,
64
],
"bookmark_text": [
18,
50,
114
],
"ntp_background": [
255,
255,
255
],
"ntp_text": [
0,
0,
0
],
"button_background": [
0,
0,
0,
0
]
},
"tints": {
"buttons": [
0,
0,
0.5
]
},
"properties": {
"ntp_background_alignment": "bottom",
"ntp_background_repeat": "no-repeat"
}
},
"name": "Test Theme",
"version": "1",
"description": "Removes thumbnails"
}
It doesn't work as expected (the theme looks great, but the JS won't start!)
source to share
in manifest.json
"permissions": ["<all_urls>"],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"],
"run_at": "document_end" // pay attention to this line
}
],
and in content.js
(function(window, chrome){
"use strict";
var doc = window.document;
doc.getElementById("mv-tiles").style.opacity = "0";
}(window, chrome));
source to share