Chrome 扩展运行后台脚本，然后运行内容脚本答案

【问题标题】：Chrome extension run background script and then content scriptChrome 扩展运行后台脚本，然后运行内容脚本
【发布时间】：2016-09-09 12:21:54
【问题描述】：

在点击浏览器操作时，我执行了注入几个嵌套 div 的注入脚本

chrome.tabs.executeScript(tab.id, {
    file: 'src/injection.js'
});

在我单击浏览器操作之前，我的内容脚本会运行并且无法正常工作，因为在浏览器操作中注入的 div 丢失了。有什么解决方案可以在不重新加载页面的情况下重新加载内容脚本？

我找到了将我的内容脚本文件放入 chrome.tabs.executeScript 函数的建议，但它不起作用

更新

manifest.json

{
    "background": {
        "page": "background/background.html",
         "persistent": true
    },
    "browser_action": {
        "default_icon": "img/favicon.png",
        "default_title": "CheapWatcher"
    },
    "content_scripts": [{
        "js": [
            "lib/jquery.min.js",
            "lib/jquery-ui.min.js",
            "lib/jquery.mousewheel.js",
            "lib/jquery.mCustomScrollbar.min.js",

            "lib/angular.min.js",
            "lib/angular-sanitize.min.js",
            "lib/angular-route.min.js",
            "lib/angular-ui-router.min.js"
        ],
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "run_at": "document_end"
    }],
    "content_security_policy": "script-src 'self'; object-src 'self",
    "description": "This extension demonstrates injection",
    "manifest_version": 2,
    "name": "CheapWatcher",
    "permissions": [
        "http://*/",
        "https://*/",
        "<all_urls>",
        "tabs",
        "cookies"
    ],
    "version": "1.0",
    "web_accessible_resources": [
        "views/*.html",
        "src/*.js",
        "css/*.css",
        "lib/*",
        "img/*.png",
        "img/*.gif",
        "img/*.ico",
        "fonts/*.ttf",
        "fonts/*.otf"
    ]
}

我从 background.js 调用 chrome.tabs.executeScript

 chrome.browserAction.onClicked.addListener(function (tab) {
    if (pageRefreshed === true || pageRefreshed === false && sidebarActive === false && buttonClickedCount === 0 && newTab === false || newTab === true) {
        chrome.tabs.executeScript(null, {file: "src/injection.js"});
        chrome.tabs.executeScript(null, {file: "src/app.js"});
        chrome.tabs.executeScript(null, {file: "src/MainController.js"});
        chrome.tabs.executeScript(null, {file: "src/LoginController.js"});
        chrome.tabs.executeScript(null, {file: "src/ListController.js"});
        chrome.tabs.executeScript(null, {file: "src/ErrorController.js"});
        chrome.tabs.executeScript(null, {file: "src/NotifyController.js"});
        chrome.tabs.executeScript(null, {file: "src/TargetController.js"});
        chrome.tabs.executeScript(null, {file: "src/RegisterController.js"});
        chrome.tabs.executeScript(null, {file: "src/ResetPassController.js"});
        chrome.tabs.executeScript(null, {file: "src/ScrollTargetController.js"});
        chrome.tabs.executeScript(null, {file: "src/SetTargetController.js"});
        chrome.tabs.executeScript(tab.id, {
            code: "$('.cheap-watcher' ).animate({ 'right': '0px' }, 'slow');"
        });
        sidebarActive = true;
        buttonClickedCount = 1;
        newTab = false;
        pageRefreshed = false;
    }
    else if (sidebarActive === true && buttonClickedCount > 0) {
        chrome.tabs.executeScript(tab.id, {
            code: "$('.cheap-watcher' ).animate({ 'right': '-370px' }, 'slow');"
        });
        sidebarActive = false;
    }
    else if (sidebarActive === false && buttonClickedCount > 0) {
        chrome.tabs.executeScript(tab.id, {
            code: "$('.cheap-watcher' ).animate({ 'right': '0px' }, 'slow');"
        });
        sidebarActive = true;
    }
});

是的，我知道这种编码是一种不好的做法，但我只是想让我的扩展工作，但到目前为止还没有运气。消息传递也无济于事。

【问题讨论】：

不太清楚你的问题。你是什么意思“重新加载内容脚本而不重新加载页面”？你的意思是拒绝injection.js？
@HibaraAi 当我重新加载页面时，我的内容脚本会运行并执行操作。当我单击 browserAction 时，我的后台脚本会注入嵌套的 div 并向用户显示注入的内容。注入的屏幕是空的，因为我的内容脚本在我单击 browserAction 之前运行，所以我想重新加载我的内容脚本，以便它可以在我注入的 div 存在时运行
为了避免竞态条件，尝试从bg脚本向pageAction发送消息，收到消息后才运行pageAction中的代码。查看 chrome.runtime.sendMessage 了解更多信息。
@NikasŽalias，基本上有两种方法，一种是编程注入，另一种是消息传递，您能否提供更多详细信息，您如何尝试chrome.tabs.executeScript？比如你叫它的地方和你的manifest.json？
@NikasŽalias，当你说不工作时，错误信息是什么？ chrome.tabs.executeScript 有一个回调参数，如果你的脚本依赖于以前的脚本，你应该在回调中注入它们。

标签： google-chrome google-chrome-extension content-script

【解决方案1】：

所以我所做的一切都很好，但我唯一错过的是手动引导我的 angular 模块，所以我只是在我的 SetTargetController.js 中编写了这段代码（因为它是最后注入的 angular 文件）

angular.element(document).ready(function() {
  angular.bootstrap(document, ['app']);
});

【讨论】：