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

Question

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

Итак, что бы я хотел сделать, это вставить файл CSS на основе идентификатора пользователя. Поэтому я хотел бы, чтобы вставить новый CSS, как:
// MySite/моя_папка/cssfiles/# # .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.

Answer 1

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

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

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