I'm currently developing a Chrome extension that provides a preview of a webpage when hovering over a hyperlink to it.
To achieve this, I am creating a div and filling it with different items. However, the issue I'm facing is that the CSS stylesheet I specified is not being applied to the div. Instead, it is inheriting the styling from its parent website, which makes it difficult for me to customize the look as desired.
Below is an excerpt from my manifest file where I attempt to inject the CSS:
{
"manifest_version": 2,
"name": "Link Preview",
"description": "This extension offers a preview of hyperlinks' destination upon hover.",
"version": "1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-1.11.1.min.js","core.js"],
"css" : ["style.css"],
"run_at":"document_end",
"all_frames": false
}
],
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"<all_urls>"
],
"web_accessible_resources": ["index.html","style.css"]
}
Here is the HTML file containing the elements. Applying styles directly to the elements within the HTML works, but it's cumbersome to do it this way:
<div id="icon_wrapper">
<img id="icon_img"
src="https://i.imgur.com/mLAiR8t.png"
alt="Webpage Icon" >
</div>
<div id="title_wrapper" >
<h1 id="title_string">
testing</h1>
</div>
<div id="description_wrapper">
<h1>description</h1>
</div>
Below is the CSS code that fails to inject. I even attempted to style the 'h1' element instead of 'title_string', but that also didn't work:
#title_string {
background-color: #ffffff !important;
margin: 3px !important;
padding: 3px !important;
font-family: "Times New Roman", Times, serif !important;
color: #a48938 !important;
}
Any assistance on this matter would be highly appreciated. I've been working tirelessly on this and could really use some guidance.