将bootstrap-glyphicon注入网页而不覆盖网页类

Question

我正在使用chrome.tabs.executeScript（）函数（和jQuery）将按钮注入用户网页。最初我使用<style scoped>标签将整个引导程序库导入到页面中，以便我可以在我的按钮中使用glyphicons：

<style>
  @font-face {
    font-family: 'Glyphicons Halflings';

    src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot');
    src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff2') form      ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url      ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }
  .glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .glyphicon-heart:before {
    content: "\e005";
  }
  .glyphicon-heart-empty:before {
    content: "\e143";
  }
</style>

我从bootstrap.css文件中复制了此文件，并且必须用实际网址替换多个src: url('../fonts/glyphicons-halflings-regular.eot');，因为相对网址不再有意义。

注入的按钮显示如下： 虽然看起来像这样：

Answer 1

你的css中有一些错误定义了字体。

这是工作版本;

  @font-face {
    font-family: 'Glyphicons Halflings';

    src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot');
    src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }
  .glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .glyphicon-heart:before {
    content: "\e005";
  }
  .glyphicon-heart-empty:before {
    content: "\e143";
  }

Fiddle

Answer 2

默认情况下，请注意，只会加载默认的脚本和对象资源。显然，字体文件是外部资源，因此您可以：

1. 通过更新content_security_policy来放宽默认政策：

   "content_security_policy": "script-src 'self'; object-src 'self' https://maxcdn.bootstrapcdn.com"
   

2. （推荐）制作引导程序文件的本地副本，并使用本地路径更新字体文件src。