Расширение Chrome с JavaScript, для изменения CSS

0

как и многие другие, я начал делать расширение Chrome, которое должно изменить CSS определенной страницы.
Я прочитал другие темы, но то, что я хочу сделать, немного сложнее, чем другое. На веб-странице я хотел бы изменить стиль, есть список выбора с одним или несколькими параметрами.
В основном это выглядит следующим образом:
<select id="users"><option value="123">Username</option></select>
"123" - это идентификатор пользователя, уникальный для всех.

Итак, что бы я хотел сделать, это вставить файл CSS на основе идентификатора пользователя. Поэтому я хотел бы вставить новый CSS:
//mysite/myfolder/cssfiles/# userID #.css

Моя проблема в том, что страница, которую я бы хотел настроить, не моя, поэтому я не могу сделать это на стороне сервера, но я хотел бы сделать расширение для моих сотрудников, чтобы чувствовать себя немного уникальным каждый раз они смотрят на веб-страницу.

В файле manifest.json выполняется следующее content_script:

"content_scripts": [
{
"js": ["myscript.js"]
}
]

и мой myscript.js следующий:

var user = document.getElementById("users");
var id = user.options[user.selectedIndex].value;
var name = user.options[user.selectedIndex].text;
var showinfo = alert("Userid: " + id + "\nUsername: " + name);

Когда страница загружается, предупреждение показывает данные правильно, но я еще не понял, как я могу использовать их для вставки моего CSS.

Я также поставил рядом с "js": часть для целей тестирования "css": ["mystyle.css"], но это один предварительно определенный стиль и не зависит от выбранного пользователя, однако он делает страница выглядит так, как я хотел и написал ее в CSS.

  • 0
    Есть ли один идентификатор пользователя, для которого вы хотите CSS? или идентификатор пользователя динамически основан на настройке / человеке, использующем расширение?
  • 0
    Это динамично, чтобы сделать вещи более сложными ..
Показать ещё 2 комментария
Теги:
google-chrome
google-chrome-extension

1 ответ

1

Самый простой способ сделать это:

var id = window.prompt("Enter your id","default");
var filepath = id + ".css";
chrome.tabs.insertCSS(tabId,{file:filepath});

Обратите внимание, что для этого требуется разрешение вкладок в вашем манифесте.

  • 0
    Я попробую это, большое спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню