webページにカスタムCSSを導入する拡張機能を作ってみた
Discussion
Qiitaへの投稿は初めてになります。Kendeaです。
クローム拡張機能を作ってみたので紹介をしたいと思います。
概要
- カスタムCSSを活用して、学校の通信アプリを改造したいと思った
- もともと、調べてみるとStylishという拡張機能を使っていた
- だけど、要素を調べながら書きたいから自分で作ろうと思った
作ったファイル
- manifest.json
- Classi-platform
- script.js
- style.css
- Google
- script.js
- style.css
- twitter
- script.js
- style.css
- YouTube
- script.js
- style.css
コード
manifest.json
{
"name": "Vialdi CSS Import for Kendea",
"author": "Kendea",
"description": "chrome extension for customize CSS and JS.",
"version": "1.0.0",
"manifest_version": 2,
"web_accessible_resources": ["*"],
"permissions": ["storage"],
"icons": {
"48": "icons/48.png"
},
"content_scripts": [
{
"matches": ["https://www.google.com/*"],
"css": ["google/style.css"],"js": ["google/script.js"]
},
{
"matches": ["https://platform.classi.jp/group2/*"],
"css": ["classi-platform/style.css"],"js": ["classi-platform/script.js"]
},
{
"matches": ["https://www.youtube.com/*"],
"css": ["YouTube/style.css"],"js": ["YouTube/script.js"]
}
]
}
Classi-Platform/script.js
consol.log("正式にインポートできています")
Classi-Platform/style.css
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
body{
font-family: 'DotGothic16', sans-serif;
background-image: url(https://img.freepik.com/premium-photo/digital-cyberspace-and-data-network-connections_24070-1044.jpg?w=2000);
}
#header{
background-image: url(https://img01.jalannews.jp/img/2020/11/20201124_hoshizora_019.jpg)
}
#header .gNavi li {
border-right: 0px!important;
}
.spen-ly-global-header {
background-image: url(https://img01.jalannews.jp/img/2020/11/20201124_hoshizora_019.jpg)
}
.spen-ly-global-menu-list .menu-list-wrapper {
backdrop-filter: blur(9px);
background-color: rgb(98 98 98 / 11%);
}
.spen-ly-global-header .header-content {
border-right: 0px!important;
}
.spen-ly-global-header .user-information .user-icon {
border-radius: 34px;
backdrop-filter: blur(9px);
}
.mod-message {
display: block;
color: blue;
border: 1px solid #ccc;
padding: 16px 13px 0;
background-color:#c8e7fa;
border-radius: 15px;
}
.group-item-list{
background-color: rgb(255, 222, 172);
}
.new-item-list{
background-color: #ccc;
border: 1px black;
}
.header{
background-color: blanchedalmond;
}
YouTube/script.js(雑)
console.log("インポートできています")
YouTube/style.css(手抜き)
*{
color: #607d8b;
}
Google/script.js
console.log("インポートできています")
Google/style.css
@charset "utf-8";
*{
background: #333 !important;
}
最後に
現在掲載しているコードは三つのサイトと少ないですが、僕のGithubを見てもらうとわかるのですが、いろいろコードを載せているので持って行っちゃってください、
一応licenseはありますのでお読みください。
最期までありがとうございました。
0
