오페라 확장의 오버레이

Question

저는 오페라 확장 개발의 초보자입니다.

오페라에는 firefox xul 오버레이와 동일한 기능이 있습니까?

텍스트 위로 마우스를 가져 가면 임시 오버레이를 만들고 싶습니다. 오버레이는 텍스트에서 마우스를 움직일 때 변경되거나 사라져야합니다.

Answer 1

특정 페이지와 상호 작용하려면 삽입 된 스크립트를 사용해야합니다. includes이라는 폴더 안에있는 JavaScript 파일 (사실 UserScript/UserJS)입니다.

이 파일에는 여기에있는 CSS 전용 툴팁 코드 (예 : http://sixrevisions.com/css/css-only-tooltips/)를 넣은 다음 CSS를 페이지의 스타일 요소에 연결할 수 있습니다. 난 당신이 오페라에서 HTML이 작업을 수행 할 수 있다고 생각

// includes/injected.js 
window.addEventListener('DOMContentLoaded', function() { 
    // Set the CSS for the tooltip 
    var tooltipCSS = '.tooltip {position: relative;}.tooltip span {margin-left: -999em; position: absolute;} .tooltip:hover span {border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;} .classic {padding: 0.8em 1em;} * html a:hover {background: transparent;} .classic {background: #FFFFAA; border: 1px solid #FFAD33; color: #333333;}'; 

    // Set the text for the tooltip 
    var tooltipText = 'This is a tooltip'; 

    // Add the CSS to the page 
    var style = document.createElement('style'); 
    style.textContent = tooltipCSS; 
    document.head.appendChild(style); 

    // Loop through all links to add "tooltip" class and extra <span> 
    var links = document.getElementsByTagName('a'); 
    for (var i = 0, len = links.length; i < len; i++) { 
     links[i].classList.add('tooltip'); 
     links[i].innerHTML += '<span class="classic">' + tooltipText + '</span>'; 
    } 
}, false);