Boostrap 3 от Glyphicon не работает в расширениях chrome?

Question

Я начинаю учиться создавать расширение в chrome. У меня возникла проблема с тем, что Chrome не принимает какой-либо значок глификона, используемый в версии 3 boostrap, например:

<span class="glyphicon glyphicon-arrow-right"></span>

Я пробовал config bootstrap в содержимом . js file или вызовите его в файле html, но он все равно не работает. Вот некоторые из моих мини-проектов:

• Chrome не распознает значок.

  .

• В моем исходном коде manifest. json я настроил chrome для получения bootstrap:

  "web_accessible_resources": [
    "/assets/*",
    "/css/*",
    "/js/DomAnalys/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://*/*",
        "http://*/*"
      ],
      "all_frames": true,
      "js": [
        "/assets/js/jquery-3.4.1.min.js",
        "/assets/js/bootstrap-3.4.1.min.js",
        "/js/content.js"
      ],
      "css": []
    }
  ]
  

• Я также настроил встроенный ускоритель непосредственно в файл js. Но ничего не произошло. Вот мой контент. js файл, я прикрепил boostrap к shadow dom:

  const urlCssContent = chrome.extension.getURL("/css/content-script.css");
  const urlCssBoostrap = chrome.extension.getURL("/assets/css/bootstrap.min.css");
  const shadow = document.querySelector('#popup-modal-transl').attachShadow({
      mode: 'open'
  });
  const importCss = `<style>
                              @import "${urlCssContent}";
                              @import "${urlCssBoostrap}";
                          </style>`;
  shadow.innerHTML = `${importCss}${content}`;