Issue
I am new to creating chrome extensions... I am trying to create a chrome extension that accepts a blacklist containing unproductive website and blocks those pages. I am trying to load a custom page onto those blocked websites however the styling isn't loading properly.
My Content.js (for loading the custom page) :
const generateSTYLES = () => {
return `<style>@import url(https://fonts.googleapis.com/css?family=opensans:500);
body {
background: #4ADEDE;
color: #fff;
font-family: "Open Sans", sans-serif;
max-height: 700px;
.study {
font-size: 120px;
border: 5px solid #FFFF00;
display: flex;
justify-content: center;
}
._404 {
font-size: 220px;
position: relative;
display: inline-block;
z-index: 2;
height: 250px;
letter-spacing: 15px;
`
};
const generateHTML = (pageName) => {
return `
<div class='_404'>404</div>
<p>STUDYING > ${pageName}</p>
`;
};
switch (window.location.hostname) {
case "www.facebook.com":
document.head.innerHTML = generateSTYLES();
document.body.innerHTML = generateHTML("FACEBOOK");
break;
case "www.netflix.com":
document.head.innerHTML = generateSTYLES();
document.body.innerHTML = generateHTML("NETFLIX");
break;
}
My manifest.json (config file for extension) :
{
"manifest_version": 2,
"name": "Clock Hacks",
"version": "0.0.1",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["Content.js"]
}
],
"icons": { "48": "icon48.png", "128": "icon128.png" },
"browser_action": {
"default_popup": "Popup.html",
"default_title": "Website Blocker"
}
}
It loads like this even though the font size should be 220px and the text should be in the center of the webpage.
Solution
Can you check you closed your < / style > and that the last style has this close bracket } ?
const generateSTYLES = () => {
return `<style>
@import url('https://fonts.googleapis.com/css?family=opensans:500');
body {
background: #4ADEDE;
color: #fff;
font-family: "Open Sans", sans-serif;
max-height: 700px;
}
.study {
font-size: 120px;
border: 5px solid #FFFF00;
display: flex;
justify-content: center;
}
._404 {
font-size: 220px;
position: relative;
display: inline-block;
z-index: 2;
height: 250px;
letter-spacing: 15px;
}
</style>
`
};
Answered By - user1731468
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.