как и многие другие, я начал делать расширение 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.
Самый простой способ сделать это:
var id = window.prompt("Enter your id","default");
var filepath = id + ".css";
chrome.tabs.insertCSS(tabId,{file:filepath});
Обратите внимание, что для этого требуется разрешение вкладок в вашем манифесте.