OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Communication between content script and web_accessible_resources iframe

  • Thread starter Thread starter zoyo
  • Start date Start date
Z

zoyo

Guest
I have a content script that injects an iframe into a webpage.

content.js

Code:
var iframe = document.createElement('iframe');
    iframe.id = "frame";
    iframe.style.cssText = "position:fixed;top: 15px;right: 15px;width: 250px;height: 245px;overflow: hidden;background-color:#FFFFFF;border-radius: 5px;";
    iframe.src = chrome.runtime.getURL('frame.html');
    document.body.appendChild(iframe);

The iframe displays some text values, has a submit and a close button.

part of frame.html

Code:
<div class="header">
   <span class="close">Name</span>
   <span class="close-btn" id="close-btn">&times;</span>
</div>
<div class="details-container">
    <span class="label">First Name : </span> 
    <span id="fname" type="text" ></span>
</div>
<div class="details-container">
    <span class="label">Last Name : </span> 
    <span id="lname" type="text" /></span>
</div>
<div class="btn-details-container">
    <button class="copy" id="copy-name">Copy</button>
</div>

frame.html has frame.js linked to it.

I want to do 2 things here.

  1. Close/Remove/Hide the iframe when user clicks on close button on the iframe(#close-btn)
  2. The values of first name and last name in span to be dynamically set (extracted from DOM of current webpage)

Problems:

1)I don't know how to propogate click event on frame.html to content script to close iframe(Unable to establish communication between frame.js and content.js)

2)Not able to set span.textContent for #fname and #lname because frame.js is not able to read webpage DOM.

<p>I have a content script that injects an iframe into a webpage.</p>
<p>content.js</p>
<pre><code>var iframe = document.createElement('iframe');
iframe.id = "frame";
iframe.style.cssText = "position:fixed;top: 15px;right: 15px;width: 250px;height: 245px;overflow: hidden;background-color:#FFFFFF;border-radius: 5px;";
iframe.src = chrome.runtime.getURL('frame.html');
document.body.appendChild(iframe);
</code></pre>
<p>The iframe displays some text values, has a submit and a close button.</p>
<p>part of frame.html</p>
<pre><code><div class="header">
<span class="close">Name</span>
<span class="close-btn" id="close-btn">&times;</span>
</div>
<div class="details-container">
<span class="label">First Name : </span>
<span id="fname" type="text" ></span>
</div>
<div class="details-container">
<span class="label">Last Name : </span>
<span id="lname" type="text" /></span>
</div>
<div class="btn-details-container">
<button class="copy" id="copy-name">Copy</button>
</div>
</code></pre>
<p>frame.html has frame.js linked to it.</p>
<p>I want to do 2 things here.</p>
<ol>
<li>Close/Remove/Hide the iframe when user clicks on close button on the iframe(#close-btn)</li>
<li>The values of first name and last name in span to be dynamically set (extracted from DOM of current webpage)</li>
</ol>
<p>Problems:</p>
<p>1)I don't know how to propogate click event on frame.html to content script to close iframe(Unable to establish communication between frame.js and content.js)</p>
<p>2)Not able to set span.textContent for #fname and #lname because frame.js is not able to read webpage DOM.</p>
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top