Automatically change html attributes on page load

Question

I am trying to create a Google Chrome custom theme (an image displayed on the new tab page). However there are these little last visited boxes blocking out part of the image, and try as I might, I can't find any extension or theme online which can get rid of them. I know what changes need to be made to achieve this; the HTML of the page contains this line:

<div id="mv-tiles" style="opacity: 1;"> == $0

and I just need to change style to "opacity: 0;". I could do this with the static HTML from Excel (with getElementById("mv-tiles").style = "opacity: 0;" or something like that)

But how do I do this dynamically, whenever I open the new tab page - not from Excel, just either with my .JSON file from the chrome theme, or with some addon?

Update

I just inserted the provided code into my JSON file as below - I then created a file in notepad where I pasted the JS code, saved it as content.js. Finally I dragged the whole folder into the chrome extensions page to save it as a .crx pack, and then installed it. Here is 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 is not working as expected (the theme appears fine but the JS won't run!)

score 0 · Accepted Answer · answered May 07 '17 at 18:57

0

in your manifest.json

"permissions": ["<all_urls>"],
"content_scripts": [
    {
    "matches": [
        "http://*/*",
        "https://*/*"
        ],
    "js": ["content.js"],
    "run_at": "document_end"         // pay attention to this line
    }
],

and in your content.js

(function(window, chrome){
  "use strict";
  var doc = window.document;
  doc.getElementById("mv-tiles").style.opacity = "0";
}(window, chrome));

answered May 07 '17 at 18:57

alessandrio

4,282
2
29
40

Thanks alot, but I'm afraid I don't know exactly how to use it. I tried pasting that into my `manifest.json` near the start (see update containing code). Then I created the `content.js` file by pasting that code directly into notepad and saving with the js extension (I didn't already have a content file). Finally I took the folder containing my manifest, content and an images sub folder, dragged it over to `chrome://extensions/` and packed into a crx. Are these the correct steps, and if so, do you know why the value wasn't changed when I opened a new tab (the pictures are still visible)? – Greedo May 08 '17 at 08:37
According to [the docs](https://developer.chrome.com/extensions/themes) I can't run JS from a chrome theme. Any workarouns you know of? I've asked [here](http://stackoverflow.com/q/43848953/6609896) if you can think of an answer? – Greedo May 08 '17 at 13:29
You can not, according to **Chrome** what you want is _impossible_ – alessandrio May 08 '17 at 21:01

Automatically change html attributes on page load

Update

1 Answers1

Linked