Chrome 扩展 - 如何运行在页面加载时评估代码

Question

所以我正在尝试做一个扩展，允许您编写自定义 JS 以注入到给定域的任何页面上。我的弹出窗口加载保存的 JS 代码，当单击保存时，JS 被评估，并且工作正常。不过，我不知道如何让代码在页面加载时进行评估。

这是我目前的情况。

//Content.js

//Globals
var entries = {"test": "test"};     //Entries dictionary "domain": "js code"
var url = window.location.href;     //Full URL of the tab
var parts = url.split("/");         //URL split by '/' character
var domain = parts[2] + '';         //Just the domain (global)

loadChanges();
chrome.runtime.onMessage.addListener(listener);

window.onload=eval(entries[domain]); //doesn't work


function listener (request, sender, sendResponse) {
    console.log("Manipulating data for: " + domain);
    if (request == "LOAD"){
        if(entries.hasOwnProperty(domain)){
            console.log("PE - Loaded Value: " + entries[domain].toString());
            sendResponse(entries[domain]);
        } else {
            console.log("Nothing to load");
            sendResponse('');
        }
    } else {
        entries[domain] = request;
        console.log(entries[domain]);
        saveChanges();
        eval(request); //This one DOES work
    }
}

//Load saved code (on startup)
function loadChanges() {
    chrome.storage.local.get(['PE'], function (data){
        console.log(data.PE);
        if (data.PE == null){
            return;
        }
        entries=data.PE;
    });
    
    if(entries.hasOwnProperty(domain)){
        eval(entries[domain]); //doesn't work
    }
}

//Save changes to code (on button press)
function saveChanges() {
    chrome.storage.local.set({PE: entries}, function(data){
        console.log("Saved Value: " + entries[domain])
    });
}

请注意其中的“无效”评论。

manifest.json
{
    "name": "PersistEdit",
    "version": "0.1.1",
    "manifest_version": 2,
    "content_scripts":[
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"],
            "run_at": "document_end",
            "persistent": false
        }
    ],
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    },
    "browser_action": {
        "default_popup": "popup.html",
        "default_title": "PersistEdit"
    },
    "permissions": [
        "storage"
    ]
}

document.addEventListener('DOMContentLoaded', onload, false);

function onload(){
    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
        chrome.tabs.sendMessage(tabs[0].id, "LOAD");
    });
}

没有包括我的 popup.html 或 popup.js 因为它的那些部分按预期工作，但我可以在必要时包括它们。我不确定我在这里遗漏了什么，任何指导将不胜感激。

Answer 1

window.onload 应该是一个函数。这里 window.onload=eval(entries[domain]); 您只是将 eval 的结果分配给 onload（在分配期间立即发生）。可能当时没有正确填充条目。

试试下面的代码

    window.onload=function () {
      eval(entries[domain]);
    }

Chrome 扩展 - 如何运行在页面加载时评估代码

Chrome Extensions - How to run eval code on page load

javascript

google-chrome-extension

Chrome 扩展 - 如何 运行 在页面加载时评估代码

Chrome Extensions - How to run eval code on page load

javascript

google-chrome-extension

Chrome 扩展 - 如何运行在页面加载时评估代码