Question

我正在测试一个chrome扩展程序，我在运行时在打开的选项卡中创建一个div并在其中应用一些css。当我在我的系统上测试它时工作正常，但是当我在其他系统上测试它（相同的chrome版本）时，它可以在某些页面上工作但不能在其他页面上工作。

我创建div的代码如下：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: "content_script.js"});
});

content_script.js：

//<LINK>
var link = document.createElement('link');
link.href = 'http://mydomain.com/getfeedback-dialog.css';
link.rel  = 'stylesheet';
link.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(link);

//OVERLAY
var getfeedback_overlay = document.createElement('div');
getfeedback_overlay.setAttribute('id', 'getfeedbackoverlay');
document.body.appendChild(getfeedback_overlay);

//DIALOG
var getfeedback_dialog = document.createElement('div');
getfeedback_dialog.setAttribute('id','getfeedbackdialog');

//CONTAINER
var getfeedback_container = document.createElement('div');
getfeedback_container.appendChild(getfeedback_dialog);

//<IMG>
getfeedback_dialog_image = document.createElement('img');
getfeedback_dialog_image.setAttribute('src','http://mydomain.com/icon.jpg');
getfeedback_dialog.appendChild(getfeedback_dialog_image);

//<A>
getfeedback_dialog_a = document.createElement('a');
getfeedback_dialog_a.setAttribute('href','http://mydomain.com');
getfeedback_dialog_a.setAttribute('id','textlogo');
getfeedback_dialog_a.setAttribute('target','_blank');
getfeedback_dialog_a.innerHTML = 'Extension by Me';
getfeedback_dialog.appendChild(getfeedback_dialog_a);

getfeedback_container.setAttribute('id','getfeedbackcontainer');
document.body.appendChild(getfeedback_container);

我想使用与“Stylish”扩展相同的方法，该扩展在加载页面时修改页面的CSS。他们是如何管理的？

如何在Chrome扩展程序中在运行时创建DOM

0 个答案: