彻底修复content-script.css污染页面的问题，实行按需注入

apps/background/background.js

@@ -58,6 +58,10 @@ let BgPageInstance = (function () {
 
     };
 
+    // 像页面注入css脚本
+    let _injectContentCss = function(tabId,toolName){
+        InjectTools.inject(tabId, {files: [`${toolName}/content-script.css`]});
+    };
 
 
     // 往当前页面直接注入脚本，不再使用content-script的配置了
@@ -66,12 +70,6 @@ let BgPageInstance = (function () {
         // FH工具脚本注入
         Awesome.getInstalledTools().then(tools => {
 
-            // 注入样式
-            let cssFiles = Object.keys(tools)
-                            .filter(tool => !tools[tool]._devTool && tools[tool].contentScriptCss)
-                            .map(tool => `${tool}/content-script.css`);
-            InjectTools.inject(tabId, {files: cssFiles});
-
             // 注入js
             let jsTools = Object.keys(tools)
                         .filter(tool => !tools[tool]._devTool
@@ -89,12 +87,6 @@ let BgPageInstance = (function () {
         Awesome.getInstalledTools().then(tools => {
             let list = Object.keys(tools).filter(tool => tools[tool]._devTool);
 
-            // 注入css样式
-            list.filter(tool => tools[tool].contentScriptCss)
-                    .map(tool => Awesome.getContentScript(tool, true).then(css => {
-                        InjectTools.inject(tabId, { css });
-                    }));
-
             // 注入js脚本
             list.filter(tool => (tools[tool].contentScriptJs || tools[tool].contentScript))
                     .map(tool => Awesome.getContentScript(tool).then(js => {
@@ -410,6 +402,9 @@ let BgPageInstance = (function () {
                     case 'request-monkey-start':
                         Monkey.start(request.params);
                         break;
+                    case 'inject-content-css':
+                        _injectContentCss(sender.tab.id,request.tool);
+                        break;
                 }
                 callback && callback(request.params);
             } else {

apps/code-beautify/content-script.css

@@ -1,6 +1,6 @@
 @import url("../static/vendor/highlight/github.css");
 
-body {
+html.fh-cb body {
     font-size: 14px;
     background: #fff;
 }
@@ -18,7 +18,6 @@ body {
     background-position: 10px 50%, 0 0;
     background-repeat: no-repeat, repeat-x;
     font: 15px/32px 'Helvetica', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif;
-    transform: translate3d(0, -37px, 0);
     -webkit-user-select: none;
     user-select: none;
 }
@@ -108,51 +107,55 @@ body {
     margin-left: 10px;
 }
 
-body.show-tipsbar > *,
-body.show-beautified > *{
+html.fh-cb body.show-tipsbar > *,
+html.fh-cb body.show-beautified > *{
     transition: .2s linear;
 }
 
-body.show-tipsbar pre,
-body.show-beautified pre {
+html.fh-cb body.show-tipsbar pre,
+html.fh-cb body.show-beautified pre {
     transform: translate3d(0, 37px, 0);
 }
 
-body #fehelper_tips {
+html.fh-cb body #fehelper_tips {
     transform: none;
 }
-body.show-tipsbar .copy{
+html.fh-cb body.show-tipsbar .copy{
     display: none;
 }
-body.show-beautified .copy {
+html.fh-cb body.show-beautified .copy {
     display: inline-block;
 }
 
-body.processing > :not(#fehelper_tips) {
+html.fh-cb body.processing > :not(#fehelper_tips) {
     opacity: .5;
     pointer-events: none;
     cursor: wait;
 }
-pre {
+html.fh-cb pre {
     padding-top: 0;
 }
-pre>code[class*="language"] {
+html.fh-cb pre>code[class*="language"] {
     overflow: initial;
 }
 
-pre ol {
+html.fh-cb pre ol {
     background: #f9f9f9;
     color:#ccc;
 }
-pre ol li {
+html.fh-cb pre ol li {
     margin: 0 0 0 2px;
     padding: 1px 0 1px 5px;
     background: #fff;
     border-left: 1px solid #ddd;
 }
-pre ol li>span {
+html.fh-cb pre ol li>span {
     color: #444;
 }
-pre ol li:hover {
+html.fh-cb pre ol li:hover {
     background:#f5f5f5;
 }
+.show-tipsbar pre,
+html.jf-cb pre {
+    padding: 30px 2px 0;
+}

apps/code-beautify/content-script.js

@@ -32,7 +32,7 @@ window.codebeautifyContentScript = (() => {
     };
 
     let formattedCodes = '';
-
+    let cssInjected = false;
     // **************************************************************
 
     /**
@@ -46,6 +46,7 @@ window.codebeautifyContentScript = (() => {
             formattedCodes = txtResult;
             code.textContent = txtResult;
             code.classList.add('language-' + fileType.toLowerCase());
+            document.querySelector('html').classList.add('jf-cb');
 
             // 用webwork的方式来进行格式化，效率更高
             let worker = new Worker(URL.createObjectURL(new Blob(["(" + highlightWebWorker.toString() + ")()"], {type: 'text/javascript'})));
@@ -91,6 +92,15 @@ window.codebeautifyContentScript = (() => {
         }
         let source = document.getElementsByTagName('pre')[0].textContent;
 
+        // 提前注入css
+        if(!cssInjected) {
+            chrome.runtime.sendMessage({
+                type: 'fh-dynamic-any-thing',
+                thing:'inject-content-css',
+                tool: 'code-beautify'
+            });
+        }
+
         $(document.body).addClass('show-tipsbar');
 
         let tipsBar = $('<div id="fehelper_tips">' +

apps/devtools/hello-world/content-script.css

@@ -0,0 +1,3 @@
+.hello {
+    color:red;
+}

apps/devtools/hello-world/content-script.js

@@ -1,8 +1,19 @@
+
+let cssInjected = false;
 /**
  * 注意这里的方法名称，其实是：window[`${toolName.replace(/[-_]/g,'')}ContentScript`];
  * @author 阿烈叔
  */
 window.helloworldContentScript = function () {
+    // 动态注入css
+    if(!cssInjected) {
+        chrome.runtime.sendMessage({
+            type: 'fh-dynamic-any-thing',
+            thing:'inject-content-css',
+            tool: 'hello-world'
+        });
+    }
+    
     console.log('你好，我是来自FeHelper的工具Demo：hello world！');
 };
 

apps/devtools/hello-world/fh-config.js

@@ -5,7 +5,7 @@ config = {
         "icon": "웃",
         "noPage": true,
         "contentScriptJs": true,
-        "contentScriptCss": false,
+        "contentScriptCss": true,
         "minVersion": "2020.02.0718"
     }
 }

apps/devtools/index.js

@@ -18,7 +18,7 @@ new Vue({
         model: {},
         demo: {
             name: 'hello-world',
-            files: ['fh-config.js', 'index.html', 'index.js', 'index.css', 'content-script.js']
+            files: ['fh-config.js', 'index.html', 'index.js', 'index.css', 'content-script.js','content-script.css']
         }
     },
     mounted: function () {

apps/grid-ruler/content-script.js

@@ -148,35 +148,18 @@ window.gridrulerContentScript = function () {
         });
     };
 
+    let cssInjected = false;
     /**
      * 执行栅格系统检测
      */
     window.gridrulerNoPage = function (tabInfo) {
 
-        // 加载CSS
-        if (window.gridrulerContentScriptCssInject) {
-            window.gridrulerContentScriptCssInject();
-        } else {
-            // 注入css and html fragment
+        // 提前注入css
+        if(!cssInjected) {
             chrome.runtime.sendMessage({
                 type: 'fh-dynamic-any-thing',
-                func: ((params, callback) => {
-
-                    let injectFn = (cssText) => {
-                        chrome.tabs.insertCSS({
-                            code: cssText
-                        });
-                    };
-
-                    let cssText = Awesome.getContentScript('grid-ruler', true);
-                    if (typeof cssText === 'string') {
-                        injectFn(cssText);
-                    } else if (cssText instanceof Promise) {
-                        cssText.then(css => injectFn(css));
-                    }
-                    callback && callback();
-                    return true;
-                }).toString()
+                thing:'inject-content-css',
+                tool: 'grid-ruler'
             });
         }
 
@@ -190,4 +173,4 @@ window.gridrulerContentScript = function () {
         _bindEvent();
     };
 
-};
+};

apps/json-format/content-script.css

@@ -69,8 +69,8 @@
     padding-top: 6px
 }
 
-pre {
-    padding: 36px 5px 5px 5px
+html.fh-jf  pre {
+    /* padding: 36px 5px 5px 5px */
 }
 
 #jfContent {
@@ -78,7 +78,7 @@ pre {
 }
 
 /*================json format style start===================*/
-.item {
+html.fh-jf .item {
     display: block;
     padding-left: 20px;
     margin-left: -20px;
@@ -87,29 +87,29 @@ pre {
     padding-bottom: 1px;
 }
 
-.item .kv-list {
+html.fh-jf .item .kv-list {
     display: block;
     padding-left: 24px;
     border-left: 1px dashed #bbb;
     margin-left: 2px
 }
-.item .string {
+html.fh-jf .item .string {
     word-wrap: break-word
 }
 
-.item .string a {
+html.fh-jf .item .string a {
     text-decoration: underline;
 }
 
-.item .string a:hover {
+html.fh-jf .item .string a:hover {
     color: #b00;
 }
 
-.item .brace {
+html.fh-jf .item .brace {
     font-weight: bold;
 }
 
-.item .expand {
+html.fh-jf .item .expand {
     width: 20px;
     height: 18px;
     display: block;
@@ -122,49 +122,49 @@ pre {
     cursor: pointer;
 }
 
-.item .expand:after {
+html.fh-jf .item .expand:after {
     content: "\25bc";
 }
 
-.item .expand:hover {
+html.fh-jf .item .expand:hover {
     opacity: 0.35
 }
 
-.item .expand:active {
+html.fh-jf .item .expand:active {
     opacity: 0.5
 }
 
-.item.collapsed {
+html.fh-jf .item.collapsed {
     white-space: nowrap
 }
 
-.item.collapsed > .kv-list {
+html.fh-jf .item.collapsed > .kv-list {
     display: none
 }
 
-.item.collapsed .item .expand {
+html.fh-jf .item.collapsed .item .expand {
     display: none
 }
 
-.item.collapsed > .ellipsis:after {
+html.fh-jf .item.collapsed > .ellipsis:after {
     content: "\2026";
     font-weight: bold
 }
 
-.item.collapsed > .ellipsis {
+html.fh-jf .item.collapsed > .ellipsis {
     margin: 0 4px;
     color: #888
 }
 
-.item.collapsed .item {
+html.fh-jf .item.collapsed .item {
     display: inline
 }
 
-.item.collapsed > .expand {
+html.fh-jf .item.collapsed > .expand {
     -webkit-transform: rotate(-90deg);
     top: -1px
 }
-.remove-quote .quote {
+html.fh-jf .remove-quote .quote {
     display: none;
 }
 /*================json format style end===================*/
@@ -251,7 +251,7 @@ pre {
     -webkit-animation: spin 1s 0 infinite
 }
 
-* {
+html.fh-jf  * {
     -webkit-font-smoothing: antialiased
 }
 
@@ -265,23 +265,23 @@ pre {
     word-break: break-all;
 }
 
-html {
+html.fh-jf  {
     font-size: 14px;
     color: #333;
     direction: ltr;
 }
 
-html body {
+html.fh-jf  body {
     direction: inherit;
     margin: 0;
 }
 
-body {
+html..fh-jf body {
     padding: 0 8px;
 }
 
 /* 工具栏 */
-.x-toolbar {
+html.fh-jf .x-toolbar {
     background-color: #f5f5f5;
     background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
     margin: 10px 0;
@@ -298,50 +298,50 @@ body {
     user-select: none;
 }
 
-.x-toolbar .x-sort input {
+html.fh-jf .x-toolbar .x-sort input {
     margin-right: 10px;
 }
-.x-toolbar span {
+html.fh-jf .x-toolbar span {
     white-space: normal !important;
 }
 
-.x-toolbar .x-sort input#sort_desc {
+html.fh-jf  .x-toolbar .x-sort input#sort_desc {
     margin-right: 0;
 }
 
-.x-toolbar .x-sort {
+html.fh-jf  .x-toolbar .x-sort {
     display: inline;
     margin: 0;
 }
 
-.x-toolbar .x-split {
+html.fh-jf  .x-toolbar .x-split {
     margin: 0 15px;
     color: #ccc;
     display: inline;
 }
 
-.x-toolbar label {
+html.fh-jf  .x-toolbar label {
     font-weight: normal;
     margin-bottom: 0;
 }
 
-.x-toolbar img {
+html.fh-jf  .x-toolbar img {
     vertical-align: middle;
 }
 
-.x-toolbar .x-a-title {
+html.fh-jf  .x-toolbar .x-a-title {
     font-size: 14px;
     color: blue;
     text-decoration: none;
     font-weight: bold;
 }
 
-.x-toolbar .x-b-title {
+html.fh-jf  .x-toolbar .x-b-title {
     font-size: 14px;
     font-weight: bold;
 }
 
-.x-toolbar.t-collapse {
+html.fh-jf  .x-toolbar.t-collapse {
     position: fixed;
     left: 100%;
     margin-left: -24px;
@@ -349,22 +349,22 @@ body {
     top: -10px;
 }
 
-.x-toolbar.t-collapse .fe-feedback {
+html.fh-jf .x-toolbar.t-collapse .fe-feedback {
     float: left;
     margin-left: -10px;
     margin-right: 20px;
 }
-.x-toolbar.t-collapse .fe-feedback .x-settings{
+html.fh-jf .x-toolbar.t-collapse .fe-feedback .x-settings{
     display: none;
 }
 
-.mod-json .format-item button {
+html.fh-jf .mod-json .format-item button {
     width: 80px;
     height: 30px;
     float: right;
 }
 
-.mod-contentscript {
+html.fh-jf .mod-contentscript {
     width: auto;
 }
 
@@ -373,8 +373,8 @@ body {
     position: static !important;
 }
 
-body>#optionBar ,
-body>#jfContent {
+html.fh-jf body>#optionBar ,
+html.fh-jf body>#jfContent {
     display: none !important;
 }
 
@@ -391,7 +391,7 @@ body>#jfContent {
     height: 120px;
 }
 
-.mod-json .callback-name {
+html.fh-jf .mod-json .callback-name {
     font-weight: bolder;
     color: #a00;
 }
@@ -414,7 +414,7 @@ body>#jfContent {
     padding: 2px 10px 2px 2px;
     z-index: 10
 }
-.hide-status-bar #statusBar {
+html.fh-jf .hide-status-bar #statusBar {
     width:0;
     height:0;
     opacity: 0;
@@ -423,7 +423,7 @@ body>#jfContent {
     cursor: default;
 }
 
-.boxOpt {
+html.fh-jf .boxOpt {
     position: absolute;
     right: 0;
     top:-1px;
@@ -435,19 +435,19 @@ body>#jfContent {
     z-index: 1000;
 }
 
-.boxOpt a {
+html.fh-jf .boxOpt a {
     cursor: pointer;
     margin: 0 5px;
     font-size: 12px;
     color: #666;
     text-decoration: none;
 }
-.boxOpt a:hover {
+html.fh-jf .boxOpt a:hover {
     color:#000;
     text-decoration: none;
 }
 
-.fe-feedback {
+html.fh-jf .fe-feedback {
     font-size: 12px;
     padding-top: 3px;
     color: #888;
@@ -467,7 +467,7 @@ body>#jfContent {
     color: #c00;
 }
 
-svg:not(:root) {
+html.fh-jf svg:not(:root) {
     overflow: hidden;
 }
 
@@ -564,7 +564,7 @@ svg:not(:root) {
 }
 
 /*================ 皮肤：theme-default ===================*/
-body.theme-default {
+html.fh-jf body.theme-default {
     background-color: #fff;
 }
 .theme-default .item .key {

apps/json-format/content-script.js

@@ -64,6 +64,8 @@ window.JsonAutoFormat = (() => {
         '6': 'theme-vegetarian'
     };
 
+    let cssInjected = false;
+
     // JSONP形式下的callback name
     let funcName = null;
     let jsonObj = null;
@@ -561,6 +563,16 @@ window.JsonAutoFormat = (() => {
 
         // 是json格式，可以进行JSON自动格式化
         if (jsonObj != null && typeof jsonObj === "object") {
+
+            // 提前注入css
+            if(!cssInjected) {
+                chrome.runtime.sendMessage({
+                    type: 'fh-dynamic-any-thing',
+                    thing:'inject-content-css',
+                    tool: 'json-format'
+                });
+            }
+
             try {
                 // 要尽量保证格式化的东西一定是一个json，所以需要把内容进行JSON.stringify处理
                 source = JSON.stringify(jsonObj);
@@ -578,6 +590,7 @@ window.JsonAutoFormat = (() => {
                 }
             }
 
+            $('html').addClass('fh-jf');
             $('body').prepend(_getHtmlFragment());
             let preLength = $('body>pre').remove().length;
             if (!preLength) {

apps/json-format/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html lang="zh-CN">
+<html lang="zh-CN" class="fh-jf">
     <head>
         <title>JSON格式化查看工具</title>
         <meta charset="UTF-8">

apps/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "FeHelper(前端助手)-Dev",
   "short_name": "FeHelper",
-  "version": "2022.12.1716",
+  "version": "2022.12.2716",
   "manifest_version": 3,
   "description": "JSON自动格式化、手动格式化，支持排序、解码、下载等，更多功能可在配置页按需安装！",
   "icons": {