由于注入到淘 宝和天 猫什么的不是什么好事情，所以，这里淘 宝用TB代替，天 猫用TM代替。
不知道为什么，引入了插件之后，导致TB的html的ui出现错位的问题！而TM则不会。
用的boostrap的版本是：v3.3.5
解决思路：
首先得定位问题！
经过不断的测试，发现是由于导入了css：
“include/bootstrap/css/bootstrap.min.css” 导致！
引入了css，在这个界面的html，符合条件的ui都会注入这个css的代码！就是因为这样子导致淘宝的ui出现了错位。
解决问题：
其实这个问题的解决方法是很多。
1 最直观想到的是，简化bootstrap.min.css文件，将可能和淘宝原来UI冲突的css代码给去掉。
不过问题是很难确定哪些代码会有冲突。而且boostrap是一个整体的框架，去掉一些util的代码会不会带来别的bug也不知道。
2 其次想到的是，也是相对合理的，就是：由于注入功能我用到boostrap框架主要是用其表单的ui。我将boostrap的表单的ui给抽取出来！
因为表单的css代码一般不会和淘宝ui造成冲突。实际上，这个方法是可行的。不过抽取的工作量大，而且很难保证ui的完整性。虽然自己可以再调整一些，但终究是麻烦。
3 理论上最好的解决办法：不在manifest.json的content_scripts的定义中引入bootstrap.min.css文件！将这个文件作为子html来用！在web_accessible_resources中引入！
相当于这样子：淘宝的html是父。而我注入的网页内容是一个子html，子html才引入bootstrap.min.css文件！这样子就不会和淘宝本身的html造成影响了！
–>测试得知，想得太好，实际上行不通。因为只要是一个html里面，其实都算一起了。
其实这个问题也就是css的作用域的问题：https://www.zhihu.com/question/21805283
4 上面的办法不行，又想多一个办法，其实是可行的，不过在弹出窗口的时候，淘宝或者天猫页面都会出现错乱，而且，本身的弹出窗口也有一定的错位。
办法：用jq动态添加css文件即可。其实是个挺不错的办法。可以作为备用方案。测试过也是基本可以实现！
5 再用一个办法，就是用Iframe层！
也还是不行！主要是因为弹出窗口要和主页面做一些沟通的，而用这个办法，子页面和父页面很难沟通！
最终决定：
权衡了一些各个方法的利弊，我最后决定用方法2，将boostrap表单的css样式给抽取出来。
主要是为了顺便学学别人的css是怎么写的。花了半个小时，完美搞定！
另外发现，可能导致冲突的是这个css代码：
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
改为：.boostrapTable * 即可。就是加了一个类(boostrapTable)的作用域！
抽取步骤的：
1)首先最好用2个要提取的最简单的html，一个是要获取的，一个是提取之后的。好针对性地对比样式。
2)接着先傻瓜式地，按照所抽取的元素的父端元素，逐一向下抽取。
为什么要先获取父的元素的css？原因很简单啊！因为css是层叠式的表单，子元素很多时候会继承父元素的css样式！
所以，为了避免重复写css，必须先抽取父元素的css样式！
然后再逐一往下提取。所以，如果是继承于父元素的css就不用抽取了。
这步骤是最有工作量的。
3)要注意的是，css元素不可以出现//备注，所有的备注都要写在/**/里面！
4)如果是那些需要判断屏幕分辨率这些的判断性的css，需要按照原来css里面的原则编写。当然，简单的话可以去掉@media等的判断，直接写也行的。
另外，对于字体部分，最好仿照原来的css是怎么处理的，复制过来即可。就是复制：@font-face这部分的代码。
还有，万一有些样式被覆盖了，可以考虑用!important这些提高优先级来用样式！
反正是：编写一个css框架是很难的，但是，反过来，从框架提取一些自己要的样式，我觉得还是很简单的。毕竟是特定场景的某一个样式而已！
5)提取完毕之后，查看提取结果的样式是否ok。如果有问题，请再好好对比原来提取的html的样式，逐一对比即可。正常来说是可以完全仿照写css的！
然后，就是完美解决了我的问题：
