Проблема с форматированием chrome.tabs.executeScript()

Я пытаюсь изменить цвет шрифта всех элементов на веб-странице. Мне сложно добавить этот цикл for в цикл: внутри функции executeScript(). Где я неправ?Проблема с форматированием chrome.tabs.executeScript()

popup.js

function main() { 

    $("p").click(function() { 
     var color = $(this).text(); 
     chrome.tabs.executeScript({ 
     code: 'var el = document.getElementByTagName("*"); for (var i=0; i < el.length; i++) { el[i].style.color = color;}' 
     }); 
    }); 
} 
$(document).ready(main);

manifest.json

// metadata file containing basic properties 

{ 
    "name": "Font Color Changer", 
    "description": "Change the color of the current page's font.", 
    "version": "1.0", 
    "permissions": [ 
    "activeTab" 
    ], 
    "background": { 
    "scripts": ["popup.js"], 
    "persistent": false 
    }, 
    "browser_action": { 
    "default_title": "Change the font color!", 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "manifest_version": 2 
}

popup.html

<!DOCTYPE html> 
<html> 
    <title>popup for browser action</title> 
    <head> 
    <script src="jquery-3.1.1.min.js"></script> 
    <script type ="text/javascript" src="popup.js"></script> 

    <style> 
     p {font-size: 20px; border: black solid 1px; text-align: center; padding: 2px;} 
     a.red:link {text-decoration: none; color: red;} 
     a.blue:link {text-decoration: none; color: blue;} 
     a.black:link {text-decoration: none; color: black;} 
     div.colors {float: left;} 
     div.font {float:right;} 
    </style> 
</head> 
<body> 
<!-- parent div for the three different options --> 
<div style = "width: 175px;"> 
    <!-- div for color selectors --> 
    <div class = "colors"> 
     <p><a class = "red" href="#">red</a></p> 
     <p><a class = "blue" href="#">blue</a></p> 
     <p><a class = "black" href="#">black</a></p> 
    </div> 
    <!-- div for font-family selectors --> 
    <div class = "font"> 
     <p>Comic Sans</p> 
     <p>Calibri</p> 
     <p>Reset</p> 
    </div> 
</div> 
</body>

источник

2016-10-04 Emilia Clarke

Используйте '.executeScript' в вн ension. См. [Chrome Extension Trigger Keydown JS] (http://stackoverflow.com/questions/23044611/chrome-extension-trigger-keydown-js/) – guest271314

Что вы подразумеваете под этим? приведенный выше код находится в моем расширении. –

Отсутствует '' s '' at 'document.getElementByTagName', то есть' document.getElementsByTagName' – guest271314

Вы отсутствует первый параметр в .executeScript; document.getElementByTagName() отсутствует "s" после Element; color не определен по адресу .executeScript call; jQuery не требуется для возврата ожидаемого результата.

Регулировка popup.js в

function click(e) { 
    chrome.tabs.executeScript(null, { 
    code: "var el = document.getElementsByTagName('*'); " 
      + "for (var i=0; i < el.length; i++) { el[i].style.color ='" 
      + e.target.textContent 
      + "'}" 
    }); 
    window.close(); 
} 

document.addEventListener("DOMContentLoaded", function(e) { 
    var p = document.querySelectorAll('p'); 
    for (var i = 0; i < p.length; i++) { 
    p[i].addEventListener('click', click); 
    } 
});

popup.html в

<!DOCTYPE html> 
<html> 
    <title>popup for browser action</title> 
    <head> 
    <style> 
     p {font-size: 20px; border: black solid 1px; text-align: center; padding: 2px;} 
     a.red:link {text-decoration: none; color: red;} 
     a.blue:link {text-decoration: none; color: blue;} 
     a.black:link {text-decoration: none; color: black;} 
     div.colors {float: left;} 
     div.font {float:right;} 
    </style> 

</head> 
<body> 
<!-- parent div for the three different options --> 
<div style = "width: 175px;"> 
    <!-- div for color selectors --> 
    <div class = "colors"> 
     <p><a class="red" href="#">red</a></p> 
     <p><a class="blue" href="#">blue</a></p> 
     <p><a class="black" href="#">black</a></p> 
    </div> 
    <!-- div for font-family selectors --> 
    <div class = "font"> 
     <p>Comic Sans</p> 
     <p>Calibri</p> 
     <p>Reset</p> 
    </div> 
</div> 
    <script src="popup.js"></script> 
</body> 
</html>

manifest.json

{ 
    "name": "Font Color Changer", 
    "description": "Change the color of the current page's font.", 
    "version": "1.0", 
    "permissions": [ 
    "tabs", "http://*/*", "https://*/*" 
    ], 
    "browser_action": { 
    "default_title": "Change the font color!", 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "manifest_version": 2 
}

См A browser action with a popup that changes the page color

источник

2016-10-04 03:37:07 guest271314

Проблема с форматированием chrome.tabs.executeScript()

ответ

Смежные вопросы