在页面加载时自动更改html属性 [英] Automatically change html attributes on page load

问题描述

我正在尝试创建Google Chrome自定义主题（在新标签页上显示的图片）。然而，这些最后访问过的小盒子挡住了图像的一部分，尽我所能，我找不到可以摆脱它们的任何扩展或主题。我知道需要做出什么改变才能实现这一点;该页面的HTML包含以下行：

 < div id =mv-tilesstyle =opacity：1; > == $ 0 
  

我只需要改变 style 到opacity：0;。我可以使用Excel中的静态HTML（使用 getElementById（mv-tiles）。style =opacity：0;或类似的东西）做到这一点。

但是我怎样才能动态地做到这一点，无论何时我打开新的标签页 - 不是从Excel中，只要使用我的.Chson主题中的.JSON文件，或者使用一些插件？ / p>

更新

我只是将提供的代码插入到我的JSON文件中 - 然后我在记事本中创建了一个文件我粘贴了JS代码，将它保存为 content.js 。最后，我将整个文件夹拖入Chrome扩展页面，将其保存为.crx包，然后进行安装。这是我完成的 manifest.json 文件：

  {
manifest_version：2，
permissions：[
< all_urls> 
]，
content_scripts：[
 {
matches：[
http：// * / *，
https： // * / *
，
js：[
content.js
]，
run_at：document_end$ b $ 
主题：{
images：[]，
colors：{
frame：[
] 66，
 116，
 201 
]，
工具栏：[
 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 
] 
}，
属性：{
ntp_background_alignment：bottom，
ntp_background_repeat：不重复
} 
}，
name：测试主题，
版本：1，
description：删除缩略图
} 
  

主题显示正常，但JS将无法运行！）

解决方案

在 manifest.json

 permissions：[< all_urls>]，
content_scripts ：[
 {
matches：[
http：// * / *，
https：// * / *
]，
js：[content.js]，
run_at：document_end//关注这一行
} 
]，
  

和你的 content.js

 （function（window，chrome）{ 
使用严格; 
 var doc = window.document; 
 doc.getElementById（mv-tiles）。style.opacity =0; 
}（window，chrome））; 
  




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!)

解决方案

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));

这篇关于在页面加载时自动更改html属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！