如何使用Chrome扩展程序在活动标签上获取和设置值

时间:2015-10-29 10:56:54

标签: javascript google-chrome google-chrome-extension

我正在开发简易扩展,但我有一个问题:(

我想通过getElementByID获取现有字段的值 并为该字段键入预定义值。

所以我创建了manfiest.json文件:

{
    "manifest_version":2,
    "name": "browser_action",
    "version": "0.1.0",
    "author": "author",
    "browser_action":
    {

    "default_title": "Use this",
    "default_popup":"popup/popup.html"

    },
    "permissions": [
    "http://*/*", 
    "https://*/*"   ],

    "background":{
    "scripts": ["background.js"],
    "persistent":false
    }}

然后popup.html

<html>
<head>
    <title>Test</title>
    <script language='javascript' src='popup.js'></script>
</head>
<body>
    <form name='testForm'>
        <input type='button' id='alertButton' value='click me'>
    </form>

     <input type='button' id='setButton' value='Set data'>


</body></html>

我有background.js这是空文件。 和popup.js看起来像:

    function myAlert(){
    alert('hello world');
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('alertButton').addEventListener('click', myAlert);
});


function setData(){
    document.getElementById("id1").value='New value';


}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('setButton').addEventListener('click', setData);
});

当我点击第一个按钮时,我可以看到警报,当我尝试将值设置为活动标签上的字段时,没有任何反应。但是,如果我将元素添加到名称为id1的popup.htm文件中,则更改该值。

它看起来正在popup.html文件上。如何在活动标签上操纵它?

请帮忙。提前致谢。

1 个答案:

答案 0 :(得分:0)

使用chrome.tabs.executeScript

注意:如果仅在弹出窗口中的某些内容后执行DOM修改,则使用"activeTab"权限,因为您不需要显示过于激进的权限"http://*/*""https://*/*"警告&#34;您的扩展程序可以修改用户访问的网站上的数据。&#34;

另见: