我正在尝试通过点击Chrome扩展程序来更改dom元素
我的档案是
popup.html
popup.js
myScript.js
manifest.json
当用户点击扩展图标时，弹出窗口会打开一个按钮。如果用户在我想要为该元素添加边框的任何元素上拖动鼠标，则用户点击该按钮然后在DOM中。
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
.wrapper{
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
min-width: 400px;
min-height: 100px;
}
.action{
display: -webkit-flex;
flex-direction:row;
justify-content: space-around;
align-items:center;
}
.btn{
width: 100px;
height: 35px;
border-top-left-radius: 26px;
border-top-right-radius: 26px;
border-bottom-left-radius: 26px;
border-bottom-right-radius: 26px;
border: 3px solid gray;
color: #CA3F39;
font-weight: 500;
background: white;
cursor: pointer;
outline: none;
}
.btn.end,.btn.download{
display: none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="wrapper">
<div class="action buttons">
<button class="btn make" id="makeTour">Start</button>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>
popup.js
chrome.runtime.onConnect.addListener(function(port){
$('#start').on('click',function(e){
port.postMessage( { start : true } );
});
});
myScript.js
var port = chrome.runtime.connect({name:"start"});
port.onMessage.addListener(function(message,sender){
if(message.start){
$(document).on('mousemove',function(e){
$(e.target).css('border','1px solid green');
})
}
});
的manifest.json
{
"manifest_version": 2,
"name": "asd",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background.scripts":{
"persistent": false
},
"content_scripts":[
{
"matches": [ "http://*/*","https://*/*"],
"js":["jquery.js","myScript.js"],
"css": [ "buttons.css" ]
}
],
"web_accessible_resources":[
"favicon.png","default.gif","ic_clear.png","popup.js"
],
"permissions":[
"<all_urls>"
],
"content_security_policy":"script-src 'self' 'unsafe-eval' https://www.google.com; object-src 'self' "
}
如果我打开popup.html并通过点击扩展图标检查popup.html上的开发人员工具，则此代码正常工作。
如果我关闭那个popup.html文件的开发者工具鼠标移动不起作用。