Проблема с кодом при использовании сценариев содержимого в расширении Chrome для изменения веб-страниц DOM - PullRequest
Новая
       14

Проблема с кодом при использовании сценариев содержимого в расширении Chrome для изменения веб-страниц DOM

0 голосов
/ 11 апреля 2019

Я пытаюсь создать расширение в Google Chrome для изменения DOM конкретной веб-страницы.

Расширение работает хорошо, но проблема в том, что я не могу стереть конкретный код текущей сети.

Я создаю manifest.json вот так 

{
"manifest_version": 2,

"name": "Extension Name",
"description": "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
}]
}

Основная идея заключается в том, чтоудалить только часть кода {display: block;} внутри DOM конкретной тестовой сети.Этот код находится внутри элемента <style>;

Полный код: 

<style>.fc-ab-root header {display: block;}.fc-ab-root {position: fixed; z-index: 2147483644;align-items: center; float: top; height: 100%; left: 0; overflow-x: auto; top: 0;display: flex; justify-content: center; letter-spacing: normal; width: 100%;}.fc-ab-root .fc-header-image-container {padding-bottom: 6px; max-width: 100%;display: flex; flex-direction: row;justify-content: center;}.fc-ab-root .fc-header-image {display: block; text-align: center; max-width: 100%;}.fc-ab-root .fc-dialog-container {box-shadow: 0 0 0.75em #888;background-color: #ffffff;border-color: #ffffff;border-radius: 0.5em;border-width: 0px; border-style: solid;}.fc-ab-root .fc-dialog-container:focus {outline: none;}.fc-ab-root section {padding-left: 2em; padding-right: 2em;padding-top: 2em; padding-bottom: 2em;}.fc-dialog-overlay {background-color: black; height: 100%; left: 0; opacity: 0.3; position: fixed; top: 0; width: 100%; z-index: -1;}.fc-whitelist-root {display: block; height: 100%; left: 0; overflow-x: auto; position: fixed; top: 0; width: 100%; z-index: 2147483644}.fc-whitelist-dialog-wrapper {align-items: center; display: flex; justify-content: center; height: 100%; left: 0; opacity: 1; position: fixed; top: 0; width: 100%;}.fc-whitelist-dialog {box-shadow: 1px -1px 16px #888888; border-radius: 2px; height: 100%; left: 0; max-height: 570px; max-width: 600px; top: 0; width: 100%;}@media screen and (max-width: 479px) {.fc-ab-root .fc-dialog-container {font-size: 13px;width: 90%;}}@media screen and (min-width: 480px) {.fc-ab-root .fc-dialog-container {font-size: 14px;width: 80%;}}@media screen and (min-width: 608px) {.fc-ab-root .fc-dialog-container {font-size: 14px;width: 70%;}}@media screen and (min-width: 960px) {.fc-ab-root .fc-dialog-container {font-size: 16px;width: 70%;}}@media screen and (min-width: 1200px) {.fc-ab-root .fc-dialog-container {font-size: 16px;width: 720px;}}.fc-ab-root header h1 {line-height: 1.3; margin-bottom: 0.5em; margin-top: 0; padding: 0;overflow-wrap: break-word;font-weight: bold;text-align: center;font-family: 'Roboto';color: #747a80;font-size: 1.25em;}.fc-ab-root header h2 {line-height: 1.3; margin-bottom: 0.5em; margin-top: 0; padding: 0;overflow-wrap: break-word;font-weight: bold;text-align: center;font-family: 'Source Sans Pro';color: #323232;font-size: 1.75em;}.fc-ab-root .fc-dialog-body p {line-height: 1.4; margin-bottom: 0.5em; margin-top: 0;overflow-wrap: break-word;text-align: center;font-family: 'Source Sans Pro';color: #000000;font-size: 1em;}.fc-ab-root .fc-buttons {justify-content: center;align-items: stretch; display: flex; flex-wrap: wrap; margin-top: 1em; width: 100%;}.fc-ab-root .fc-button {cursor: pointer; display: flex; flex-grow: 0; margin: 0.25em; outline: none;overflow-wrap: break-word;font-weight: bold;text-align: center;font-family: 'Source Sans Pro';color: #ffffff;font-size: 1.25em;padding-left: 1em; padding-right: 1em;padding-top: 0.5em; padding-bottom: 0.5em;background-color: #016ca2;border-color: #ffffff;border-radius: 0.25em;border-width: 0px; border-style: solid;}.fc-ab-root .fc-button-label {align-self: center; line-height: 1.4em; margin: 0; min-width: 168px; width: 100%;}.fc-ab-root .fc-subscription-link {cursor: pointer; display: block; margin-top: 0.5em; outline: none; text-decoration: none;overflow-wrap: break-word;text-align: center;font-family: 'Roboto';color: #016ca2;font-size: 1em;}.fc-ab-root button:focus .fc-button-label, .fc-ab-root a:focus {outline: auto;}</style>

В моем test.js я пробую разные типы кода js, чтобы стереть эту часть, например, но не могу. 

document.head.innerHTML = document.head.innerHTML.replace(new RegExp("display", "g"), " ");

(элемент <style> находится в стиле html - head)

Если кто-то может мне помочь, я был бы очень признателен.

1 Ответ

0 голосов
/ 11 апреля 2019

Если ваша единственная цель - это содержимое <style>, вы должны сначала выбрать эти теги стиля и изменить его содержимое. Непосредственное изменение document.head.innerHTML небезопасно, так как может также удалять другие теги из <head>

let styles = document.head.querySelectorAll('style');
styles.forEach((style) => {
  style.innerHTML = style.innerHTML.replace(/your regex/, 'new content');
});
...