My goal is to develop a Google Chrome extension that can manipulate the DOM of a specific webpage. While the extension itself functions properly, I am facing an issue where I am unable to remove certain code from the current webpage.
I have created a manifest.json file with the following content:
{
"manifest_version": 2,
"name": "Extension Name",
"description": "Description of Extension functionality ...",
"version": "2.3",
"icons": {
"32": "images/icon_32.png",
"128": "images/icon_128.png"
},
"permissions": [
"<all_urls>",
"file:///*/*"
],
"browser_action": {
"default_icon": "images/icon_16.png",
"default_popup": "popup/popup.html"
},
"content_scripts": [{
"matches": ["http://test.com/*"],
"js": ["js/test.js"],
"all_frames": true
}]
}
The main challenge lies in removing only a specific part of the code {display: block;} within the DOM of the test website. This code snippet is located within the <style> element.
The complete code snippet is as follows:
(Code snippet provided)
In my test.js file, I've attempted various JavaScript methods to eliminate this section of code, but so far, none have worked successfully.
document.head.innerHTML = document.head.innerHTML.replace(new RegExp("display", "g"), " ");
(The <style> element is contained within the html - head - style structure)
If anyone could offer guidance on how to resolve this issue, it would be greatly appreciated.