由於注入到淘 寶和天 貓什麼的不是什麼好事情，所以，這裏淘 寶用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的！
然後，就是完美解決了我的問題：
