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

zxlie · Dec 27, 2022 · e6fb23a · e6fb23a · Dreamer-Paul · Dec 27, 2022
1 parent 5ef0a54
commit e6fb23a
Show file tree

Hide file tree

Showing 13 changed files with 123 additions and 105 deletions.
diff --git a/apps/background/background.js b/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 {

diff --git a/apps/code-beautify/content-script.css b/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;
+}
diff --git a/apps/code-beautify/content-script.js b/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">' +

diff --git a/apps/devtools/hello-world/content-script.css b/apps/devtools/hello-world/content-script.css
@@ -0,0 +1,3 @@
+.hello {
+    color:red;
+}
diff --git a/apps/devtools/hello-world/content-script.js b/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！');
 };
 

diff --git a/apps/devtools/hello-world/fh-config.js b/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"
     }
 }
diff --git a/apps/devtools/index.js b/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 () {

diff --git a/apps/grid-ruler/content-script.js b/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();
     };
 
-};
+};