I have an app where it will inject a button to any page, the button links to an HTML page from my chrome extension.
The page opens, but I received the following error on the page.
hnplemhgefnimaejljoniapgopbpfcad is blocked
Requests to the server have been blocked by an extension.
Try disabling your extensions.
ERR_BLOCKED_BY_CLIENT
However, if I refresh the page, the page starts to work. Does anybody know why?
Example app:
content.js
const body = document.querySelector('body');
const newNode = document.createElement('div');
newNode.setAttribute('style', 'position: fixed; padding: 15px; background: yellow; margin: 100px; z-index:99999;')
newNode.innerHTML = `Example Page`;
body.insertAdjacentElement('afterbegin', newNode);
example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Example</title>
</head>
<body>
<h1>example</h1>
</body>
</html>
manifest.json
{
"name": "example",
"version": "1.0",
"description": "example",
"manifest_version": 2,
"permissions": ["declarativeContent", "contextMenus"],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"]
}]
}
Related
I am making a website with Tailwind CSS and I want to use a custom font from Google fonts. I already imported the font in the HTML <head> tag and then I updated my tailwind.config.js file.
Unfortunately, when I add the utility class that references the imported font, the font doesn't change.
I'd like to know what I'm doing wrong and how I should properly use Google fonts in Tailwind CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Barlow:wght#600&family=Fraunces:opsz,wght#9..144,700;9..144,900&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="/sunnyside-agency-landing-page/tailwind.css" />
<title>Frontend Mentor | Sunnyside agency landing page</title>
</head>
<body class="font-barlow">
<h1>Hello World</h1>
</body>
</html>
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
fontFamily: {
barlow: ['"Barlow"', "sans-serif"],
},
},
},
plugins: [],
};
When I hover over the body class name, this message pops up.
Here are the computed styles
I also tried to remove the double quotes in '"Barlow"', but it did not help.
You need to configure the content parameter on your tailwind.config.js to include your html files.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
fontFamily: {
barlow: ['"Barlow"', "sans-serif"],
},
},
},
plugins: [],
};
Having an issue where I'm trying to add in google fonts to a tailwind file, but I cannot for the life of me get it to work. Have followed multiple tutorials and they all show slightly different ways of doing this but none of them work. Have restarted my config file multiple times from scratch and re-done all the HTML & CSS files too.
The weird thing is when I hover over the utility class in the HTML, the popup shows that the class is changing the font family property but it simply doesn't when I refresh the live server.
Here is my HTML & config below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter:wght#200;400;600&display=swap" rel="stylesheet">
<title>Test Website</title>
</head>
<body>
<div class="text-xl font-std">test font 1</div>
<div class="text-xl font-alt">test font 2</div>
</body>
</html>
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js,css}"],
theme: {
extend: {
fontFamily: {
std: ["Inter", "sans-serif"],
alt: ["Arvo", "serif"],
}
},
},
plugins: [],
}
fontFamily is not child of extend:
try:
theme: {
fontFamily: {
std: ["Inter", "sans-serif"],
alt: ["Arvo", "serif"],
}
},
example: https://play.tailwindcss.com/sEmrhTsuEJ?file=config
I have installed tailwindcss using PostCSS. However it's not taking effect when i try to use it to style my html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/dist/output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home Page</title>
</head>
Here is the output in tailwind.config.js:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
i changed the path to ../dist/output.css
<link href="../dist/output.css" rel="stylesheet">
it is not properly pointing to the right output.css file location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue js 01</title>
</head>
<body>
<div >
<h1 id="message" #click="update">{{message}}</h1>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script>
let app = Vue.createApp({
data(){
return {
message:'hai welcome to vue 3!',
}
},
methods:{
update(){
this.message='Changed'
}
}
})
app.mount("#message")
</script>
</body>
</html>
why this is not working when click on h1 tag
when I am clicking this h1 tag it is not working. but if it is inside a <div> it will be work moving it id to this div
It gives me "2.4.7 Focus Visible" AA error in Mac when I check my site with siteimprove chrome extension. Some times it works fine in windows systems some times it's not.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
a#login-as-guest:focus{ background-color: yellow; }
a#login-as-guest-active:active{ background-color: yellow; }
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
window.onload=function(){
}
</script>
</head>
<body>
<a tabindex="0" id="login-as-guest">Cancel and browse as guest</a>
<br />
<a id="login-as-guest-active">Active Cancel and browse as guest</a>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "t2hbS"
}], "*")
}
</script>
</body>
</html>
It's already running in my server "https://myappdemo.com/focus/test.html"
Please help me thanks in advance.
Your code sample just changes the focus background color and your demo link just sets the focus text color. A typical focus indicator is an outline border, which is provided by default by most (all?) browsers, but your color changes are sufficient to show a focus too. In fact, since you are only changing :focus{background-color} and a{color}, respectively in the two examples, you will get your color change and the browser's default focus border.
I don't see why siteimprove is flagging it. Can you post the error siteimprove is claiming and all relevant info it's complaining about?
Make sure that user interface elements, that can receive keyboard focus, are highlighted on focus.
a:hover, a:active, a:focus {
text-decoration: underline;
color: green;
}